Routing and Navigation In Angular

Routing and Navigation In Angular

Angular12 23-07-2021 Saheb Sutradhar

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

Routing and Navigation In Angular

    <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

 

 

 

Related Posts

Card image cap

Angular Material Datepicker Example

Angular12 14-07-2021 Saheb Sutradhar

In this angular material datepicker post i will show you how to use Datepicker in angular app using angular material. ...

Card image cap

Angular Material Sidenav Example

Angular12 14-07-2021 Saheb Sutradhar

In this post you will learn how to implement angular material sidenav , in most of the realtime projects we use sidenav for the application navigation , even in ...

Card image cap

Property binding in angular 12

Angular12 14-07-2021 Saheb Sutradhar

In this post we are going to learn property binding  in angular . Before learning property binding in angular we should know the difference between HTML Attrib ...

Card image cap

Class binding in angular 12

Angular12 15-07-2021 Saheb Sutradhar

In this post we are going to see how we can bind class in angular . Class binding  in angular is very important when you work in a real time project. I have ex ...

Card image cap

Event Binding in Angular 12

Angular12 16-07-2021 Saheb Sutradhar

In this post we are going to learn what is event binding in angular, event binding is most important thing without event binding we can not build an angular app ...

Card image cap

Pipes in Angular 12

Angular12 16-07-2021 Saheb Sutradhar

In angular we use pipes to formate the data, thre are few built in pipes in angular. ...