router

The RouterOutlet is one of the router directives that became available to the AppComponent because AppModule imports AppRoutingModule which exported RouterModule. It tells the html where to display the routed html.

<router-outlet></router-outlet>

Create a link

<nav>
  <a routerLink="/heroes">Heroes</a>
</nav>

Create a parameterized link

<routerLink="/detail/{{hero.id}}">

Routes

import {RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'detail/:id', component: HeroDetailComponent },
];

• regular

• default route

• parameterized

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

Detect parameters in component

import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

Inject ActivatedRoute which hold info about route and location interacts with the browser. The + turn the string into an integer

constructor(
  private route: ActivatedRoute,
  private location: Location
)

ngOnInit() {
  const id = +this.route.snapshot.paramMap.get('id');
}

Going Back

goBack(): void {
  this.location.back();
}