Angular Routing and Navigation

 What is angular routing?

Users can navigate from one view to another view across the application and displaying data in the view according to the user action. Angular routing mechanism derived from the '@angular/router' library.it builds a powerful single page application.

Route Gaurd: Using Route Gaurd restrict unauthorized component level routing.

router-outlet: This routing directive provides advanced routing features. Using this we can achieve the child routing, dynamic routing, and wildcard routing according to the route path configuration.router-outlet behave like as placeholder in our application.

1. Angular Simple Routing
2. Angular child routes.
3. Angular Navigation.
4. Angular routing children with parameters and get route params.

Simple routing:

 

1. Create Home, Aboutus, Contactus, Service component using the below command.
ng g c home
ng g c aboutus
ng g c contactus
ng g c service

2.In app.routing.module Import Routes, RouterModule from '@angular/router' library.

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

Then you have to create a route array with some properties like path, component.
The path is string properties define URL path match.The component properties loading the component according to the path match.

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'home', component: HomeComponent },
  { path: 'aboutus', component: AboutusComponent },
  { path: 'contactus', component: ContactusComponent },
  { path: 'service', component: ServiceComponent },
 
]

 Then import-export in the @Ng Module. Configure Routes in forRoot. We can use .forChild(routes) also for submodule implementation that we can see later.

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

 

3. Create a navigation menu in app.component.html and use the router-outlet directive below of navigation menu.

 <a class="nav-link" routerLink="home" routerLinkActive="active">Home <span class="sr-only">(current)</span></a>

<router-outlet></router-outlet>

routerLink properties trigger the component name while navigation.

routerLinkActive properties activating the link and add CSS while navigation. Refer the blow full code.

app.component.html

<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
  <a class="navbar-brand" routerLink="home" routerLinkActive="active">M Tutorial Routing</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09"
    aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
 
  <div class="collapse navbar-collapse" id="navbarsExample09">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" routerLink="home" routerLinkActive="active">Home 
        <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="aboutus" routerLinkActive="active">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="contactus" routerLinkActive="active">Contact Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="service" routerLinkActive="active">Service</a>
      </li>
 
 
    </ul>
    <form class="form-inline my-2 my-md-0">
      <input class="form-control" type="text" placeholder="Search" aria-label="Search">
    </form>
  </div>
</nav>
<router-outlet></router-outlet>

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutusComponent } from './aboutus/aboutus.component';
import { ContactusComponent } from './contactus/contactus.component';
import { ServiceComponent } from './service/service.component';
 
import { HomeComponent } from './home/home.component';
 
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'home', component: HomeComponent },
  { path: 'aboutus', component: AboutusComponent },
  { path: 'contactus', component: ContactusComponent },
  { path: 'service', component: ServiceComponent },
 
]
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
 

Angular child routes

In this section, will describe how to achieve the child routing in our angular application. In real-time application most of the scenario we have to implement the child menu. So this lesson would be very useful for us.

 

 

1. Create Home, Aboutus, Contactus, Service component using the below command.
ng g c home
ng g c aboutus
ng g c contactus
ng g c service

ng g c angulartutorial
    ng g c introduction
    ng g c folderandstructure
    ng g c databinding

ng g c userdetail
    ng g c login
    ng g c registration

2.Create routes array in app.routing.module.ts.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutusComponent } from './aboutus/aboutus.component';
import { ContactusComponent } from './contactus/contactus.component';
import { ServiceComponent } from './service/service.component';
import { IntroductionComponent } from './introduction/introduction.component';
import { AngularfolderstructureComponent } from './angularfolderstructure/angularfolderstructure.component';
import { DatabindingComponent } from './databinding/databinding.component';
import { LoginComponent } from './login/login.component';
import { RegistrationComponent } from './registration/registration.component';
import { AngulartutorialComponent } from './angulartutorial/angulartutorial.component';
import { UserdetailsComponent } from './userdetails/userdetails.component';
import { PagenotfoundComponent } from './pagenotfound/pagenotfound.component';
import { HomeComponent } from './home/home.component';
 
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'home', component: HomeComponent },
  { path: 'aboutus', component: AboutusComponent },
  { path: 'contactus', component: ContactusComponent },
  { path: 'service', component: ServiceComponent },
  {
    path: 'angulartutorial', component: AngulartutorialComponent,
    children: [
      // {
      // path:  '',
      // component:  IntroductionComponent
      // },
      {
        path: 'introduction',
        component: IntroductionComponent
      },
      {
        path: 'angularfolderstructure',
        component: AngularfolderstructureComponent
      },
      {
        path: 'databinding',
        component: DatabindingComponent
      }
    ]
  },
  {
    path: 'userdetails', component: UserdetailsComponent,
    children: [
      // {
      // path:  '',
      // component:  LoginComponent
      // },
      {
        path: 'login',
        component: LoginComponent
      },
      {
        path: 'registration',
        component: RegistrationComponent
      }
 
    ]
  },
  { path: '**', component: PagenotfoundComponent }
]
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
 

 

We are adding extra children array properties in the parent component.

path:'' This property describes if path is blank then loading the main home component.

path:'**' This called wildcard routing. If any URL path is not matching with routes then loading the pagenotfound.ts component.

app.component.html

<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
    <a class="navbar-brand" routerLink="home" routerLinkActive="active">M Tutorial Routing</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
 
    <div class="collapse navbar-collapse" id="navbarsExample09">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" routerLink="home" routerLinkActive="active">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="aboutus" routerLinkActive="active">About Us</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" routerLink="contactus" routerLinkActive="active">Contact Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="service" routerLinkActive="active">Service</a>
          </li>
 
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" routerLink="angulartutorial" routerLinkActive="active" id="dropdown09" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Angular Tutorial</a>
          <div class="dropdown-menu" aria-labelledby="dropdown09">
            <a class="dropdown-item" routerLink="angulartutorial/introduction" routerLinkActive="active">Introduction</a>
            <a class="dropdown-item" routerLink="angulartutorial/angularfolderstructure" routerLinkActive="active">Angular folder and structure</a>
            <a class="dropdown-item" routerLink="angulartutorial/databinding" routerLinkActive="active">Databinding</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" routerLink="userdetails" routerLinkActive="active" id="dropdown09" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">User</a>
          <div class="dropdown-menu" aria-labelledby="dropdown09">
            <a class="dropdown-item" routerLink="userdetails/login" routerLinkActive="active">login</a>
            <a class="dropdown-item" routerLink="userdetails/registration" routerLinkActive="active">registration</a>
 
          </div>
        </li>
      </ul>
      
    </div>
  </nav>
  <router-outlet></router-outlet>

angulartutorial.component.html

<router-outlet></router-outlet>

userdetail.component.html

<router-outlet></router-outlet>

We have to create three router-outlet one for app.component.html and another two for angulartutorial.component.html, userdetail.component.html.

 

Angular Navigation:

Navigation achieved by multiple ways one for, clicking the routerLink property through anchor tag in UI.

 

 <a class="nav-link" routerLink="contactus" routerLinkActive="active">Contact Us</a>

Typescript function through also we can navigate URL

<a class="card-link navback handcursor" (click)="Mainrouting(blog.blog_Url)" >

 

import { Router } from '@angular/router';
 
constructor(private router:Router) { 
}
 
Mainrouting(seourl)
{
  this.router.navigate([seourl]);
}

Angular routing children with parameters and get route params:

How to pass multiple routing parameters in angular?.

app.routing.module.ts

{ path: 'service/:id/:name', component: ServiceComponent }

app.component.html

<a class="nav-link" [routerLink]="['/service',10,'angular']" routerLinkActive="active">Service</a>

When you navigating, your URL looks like this http://localhost:4200/service/10/angular.

How to get route params value  in angular routing?

Import ActivatedRoute,Router from '@angular/router' library and declare as a private variable in constructor.

service.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
 
@Component({
  selector: 'app-service',
  templateUrl: './service.component.html',
  styleUrls: ['./service.component.css']
})
export class ServiceComponent implements OnInit {
id:number;
name:string;
url:string;
 
  constructor(private route: ActivatedRoute,private router:Router) { 
 
 
  }
 
  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.url = this.router.url;
      this.id = this.route.snapshot.params.id;
      this.name=this.route.snapshot.params.name;
    });
  }
 
}

service.component.html
<p>service works!</p>
 
<h2>Id : {{id}}</h2>
<h2>Name : {{name}}</h2>
<h2>URL : {{url}}</h2>