Angular7 Routing

Angular7 Routing

Route is basically to navigate between pages. You've seen lots of linked sites that will direct you to a new page. Using routing, that can be achieved. Here the pages we refer to will be in the form component. We've seen how to build a part before. Let's build a part now, and see how to use it with routing.

We have already included the routing module during the project setup and the same can be discovered at app.module.ts as shown below –

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

AppRoutingModule is added to the Import array as shown above.

The app-routing.module file details are given below-

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];
@NgModule({ 
   imports: [
      RouterModule.forRoot(routes)
   ],
   exports: [RouterModule] 
}) 
export class AppRoutingModule { }

Here we should note that this file is generated by default when the routing is added during the setup of a project. If the files above are not added, they must be added manually.

So we imported Routes and RouterModule from @angular / router into the file above.

There is a given const route that is of type Routes. It is an array that holds all the necessary routes in our project.

RouterModule is given the const routes, as shown in @NgModule. We need to add <router-outlet> directive to display the routing details to the user, where we want the view to be displayed.

In app.component.html the same is added as shown below-

<h1>Routing Example Angular 7</h1> 
<router-outlet></router-outlet>

Now let us build 2 components called as Home and Contact Us and navigate between them using routing.

Component Home

Next, we are going to talk about Home. Then is the Component Home syntax –

ng g component home

C:\projectA7\angular7-app>ng g component home CREATE 
src/app/home/home.component.html (23 bytes) CREATE 
src/app/home/home.component.spec.ts (614 bytes) CREATE 
src/app/home/home.component.ts (261 bytes) CREATE 
src/app/home/home.component.css (0 bytes) UPDATE 
src/app/app.module.ts (692 bytes)

The following is the Component Contact Us syntax –

ng g component contactus

C:\projectA7\angular7-app>ng g component contactus 
CREATE src/app/contactus/contactus.component.html (28 bytes) 
CREATE src/app/contactus/contactus.component.spec.ts (649 bytes) 
CREATE src/app/contactus/contactus.component.ts (281 bytes) 
CREATE src/app/contactus/contactus.component.css (0 bytes) 
UPDATE src/app/app.module.ts (786 bytes)

Components are created at home and contact us. Below are the component details at app.module.ts –

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      HomeComponent, 
      ContactusComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ],
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

Let us now add the details of the routes in app-routing.module.ts as shown below –

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component';

const routes: Routes = [ 
   {path:"home", component:HomeComponent}, 
   {path:"contactus", component:ContactusComponent} 
];
@NgModule({ 
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { }

The list of routes has descriptions of the component with path and function. As shown above the required component is imported.

Here we must note that the components we need for routing are imported into app.module.ts and also into app-routing.module.ts. Let's import them in one place, that is, in the app-routing module.ts.

So we will build a component list to be used for routing and will export the list to app-routing.module.ts and import it to app.module.ts again. So in app-routing.module.ts we have all the components to use for the routing.

This is how we have done it app-routing.module.ts −

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component'; 

const routes: Routes = [
   {path:"home", component:HomeComponent},
   {path:"contactus", component:ContactusComponent} 
];
@NgModule({
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { } export const 
RoutingComponent = [HomeComponent,ContactusComponent];

The component array i.e., RoutingComponent is imported as follows in app.module.ts –

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt';

@NgModule({ 
   declarations: [ 
      SqrtPipe,
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [],
   bootstrap: [AppComponent] 
})
export class AppModule { }

So we are finishing defining the routes now. We need to display the same to the user, so let's add two buttons, Home and Contact Us in app.component.html and click the respective buttons to display the component view within the <router-outlet> directive that we added to add.component.html.

Create the app.component.html button inside, and send the path to the routes created.

<h1>Angular 7 Routing Example1</h1> 
<nav> 
   <a routerLink = "/home">Home</a> 
   <a routerLink = "/contactus">Contact Us </a> 
</nav> 
<router-outlet></router-outlet>

We added anchor links in.html, Home and Contact us, and used routerLink to send the path to the routes we built in the app-routing.module.ts process.

Let's check the same now in your browser –

So we get it in the browser. Let us add some styling to make the links look good.

In app.component.css we added following css –

a:link, a:visited { 
   background-color: #848686; 
   color: white; 
   padding: 10px 25px; 
   text-align: center; 
   text-decoration: none; 
   display: inline-block; 
} 
a:hover, a:active {
   background-color: #BD9696;
}