In this post you are going to learn how to implement Routing and Navigation in Angular. Once you read the complete post you are going to have in depth understanding how routing works in angular.
There are few steps to implement routing in angular
- Configure route in application
- Add router outlet
- Add links
Step 1 - Configure route in application
src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { RouterModule } from '@angular/router';
import { NotfoundComponent } from './notfound/notfound.component';
const route=[
{path:'',component:DashboardComponent},
{path:'about',component:AboutComponent},
{path:'contact',component:ContactComponent},
{path:'**',component:NotfoundComponent},
];
@NgModule({
declarations: [
AppComponent,
DashboardComponent,
AboutComponent,
ContactComponent,
NotfoundComponent,
],
imports: [
BrowserModule,
RouterModule.forRoot(route)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
In angular for routing we use RouterModule from @angular/route , so first import the RouterModule in the app.module then add the RouterModule Class in the imports array. forRoot([]) is a static method defined in the RouterModule class and we use this method to define the root route of the application. We pass the route configuration array as the parameter of forRoot() method.
Route object takes two parameter {path:'about',component:AboutComponent} path and component . Path hold the URL endpoint and the component will get display if the URL with the same endpoint active.
path : '**' is wildcard route , that means if any URL does not match with any route then wildcard route will be activated .In application we use it to display 404 Page Not Found page. We need to define the wildcard route after all the route.
Step 2 - Add Router Outlet
src/app/app.component.html
<router-outlet></router-outlet>Once any route is activated we need a place where we display the associated component of that route .router-outlet is a directive which defined in RouterModule , when angular sees the router-outlet it render the component and display , the component is always rendered after the router-outlet it doesn't get rendered inside of it.
Step 3- Add Link
src/app/app.component.html
<a routerLink="/" >Home</a>
<a routerLink="/about" >About</a>
<a routerLink="/contact">Contact</a>
<router-outlet></router-outlet>For link in angular we don't use href attribute , the reason is if user clicks any link which has href attribute then the page gets reload and the entire page will get download again and again and the angular app will get re-initialised which we don't want . We want when we navigate to a page only the page content will be downloaded not the entire application. For that angular provides routerLink , it is defined in RouterModule.
How to highlight a link tab if that link is active
<a routerLinkActive="activeClass" routerLink="/contact" >Contact</a>routerLinkActive is a directive available in RouterModule , we use routerLinkActive to apply css class if the link is active.
I hope this article is helpful for you , i am very glad to help you thanks for reading
