Routing & Navigation Angular 2+

second.component.html

Angular 2+

<p>
  second works!  
</p>
id 1: {{ id1 }}<br/>
id 2: {{ id2 }}<br/><hr/>

location:<br/> {{ location | json }}<hr/>

routerLink:<br/>
<a routerLink="/home">Home</a><hr/>

queryParams:<br/>
<a [routerLink]="['../employee']" [queryParams]="{id: 2}">Employee</a><br/>
<a routerLink="../admin" [queryParams]="{id: 1}">Admin </a><hr/>

Not found: go to home <br/>
<a [routerLink]="['../employee', '3']" >Employee/3</a><hr/>

Button<br/>
<button (click)="goToAppFirst(2)">Go To App First</button>

second.component.ts

Angular 2+

import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { Router, Params, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-second',
  templateUrl: './second.component.html',
  styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {
  private subscriptions: Subscription[] = [];
  id1: string;
  id2: string;
  location: any;
  constructor(private route: ActivatedRoute, private router: Router) {
    this.location = window.location;
  }

  ngOnInit(): void {
    /* http://localhost:4200/second/admin?id=1222 */
    this.route.queryParams.subscribe((params: Params) => {
      this.id1 = params.id;
      this.id2 = params['id'];
    });
  }

  goToAppFirst(id) {
    /* redirectTo /second/id */
    this.router.navigate(['/second', id]);
  }

}

app.module.ts

Angukar 2+

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';
import { ThirdComponent } from './third/third.component';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';


const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'first', component: FirstComponent },
  { path: 'second/:role', component: SecondComponent },
  {
    path: 'third',
    component: ThirdComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  { path: '**', component: HomeComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    FirstComponent,
    SecondComponent,
    ThirdComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(
      appRoutes, { enableTracing: true }
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Demo | Github | Download.zip