Angular Routing

#Install angular routing to your application

=> ng generate module app-routing --flat --module=app

#Then open index.html file in the root

=> Keep <base href="/"> on head section

 

# then open app.component.html file and keep <router-outlet></router-outlet> at bottom of the page

# Open app-routing.module.ts file import components which you used for routing

import { HomeComponent } from './home/home.component';

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

import { EmployeeComponent } from './employee/employee.component';

import { StudentComponent } from './student/student.component';

import { NgModule } from '@angular/core';

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

 

const routes: Routes = [

  { path: '', component: HomeComponent}, // for home path

  {path: 'abc', redirectTo:'students', pathMatch: 'prefix' }, // redirect route

  { path: 'students', component: StudentComponent},

  { path: 'employee', component: EmployeeComponent},

  { path: '**', component: PageNotFoundComponent } // for page not found,keep it always at last

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { };

export const RoutingComponents=[EmployeeComponent,StudentComponent,PageNotFoundComponent,HomeComponent];

 

# Now open app.module.ts file imports components from app-routing-module

 

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

 

// import RoutingComponents [which located app-routing.module]

import { AppRoutingModule, RoutingComponents } from './app-routing.module';

import { AppComponent } from './app.component';

 

@NgModule({

  declarations: [

    AppComponent,

    RoutingComponents

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

# Make navigation for routing in app.component.html file

 

<ul class="list-item">

  <li><a routerLink='' >Home</a></li>

  <li><a routerLink='students'>Students</a></li>

  <li><a routerLink='employee'>Employee</a></li>

</ul>

 

<router-outlet></router-outlet>

 

_________________________________________________________________________________

 

Router Parameter

 

open where you clicked [student.component.html]

use onSelect method to select a department

 

<h2>Student List</h2>

<ul>

    <li *ngFor="let student of students">

        {{student.id}}. 

        <span (click)="onSelect(student)">

            {{student.name}}</span>

    </li>

</ul>

 

#The onSelect mehod on [student.component.ts] file

 

 onSelect(student){

    this.router.navigate(['/students', student.id]);

  }

 

# student-details.component.ts file

 

import { Component, OnInit } from '@angular/core';

import { ActivatedRoute } from '@angular/router'; // for activated router

@Component({

  selector: 'app-student-details',

  templateUrl: './student-details.component.html',

  styleUrls: ['./student-details.component.css']

})

export class StudentDetailsComponent implements OnInit {

 

  constructor(private route: ActivatedRoute) { }

  public depId;

  ngOnInit(): void {

    let id=parseInt(this.route.snapshot.paramMap.get('id')); 

    // get router parameter

    this.depId= id;

 

  }

}

 

=> view your param id use

{{depId}}