Angular Routing
Implementing navigation with Angular Router
Route Configuration
const routes: Routes = [
{ path: '', component: HomeComponent }, # default route
{ path: 'about', component: AboutComponent },
{ path: 'user/:id', component: UserComponent }, # route parameter
{ path: '**', component: NotFoundComponent } # wildcard route
];
Router Module
@NgModule({
imports: [RouterModule.forRoot(routes)], # root routes
exports: [RouterModule]
})
export class AppRoutingModule { }
Router Outlet
<router-outlet></router-outlet> # render routed component
Router Links
<a routerLink="/home">Home</a> # declarative navigation
<a [routerLink]="['/user', userId]">User</a> # with parameter
<a routerLink="/home" routerLinkActive="active">Home</a> # active class
Programmatic Navigation
constructor(private router: Router) { }
this.router.navigate(['/home']); # navigate
this.router.navigateByUrl('/home'); # by URL
Route Parameters
constructor(private route: ActivatedRoute) { }
this.route.params.subscribe(params => {
const id = params['id']; # access parameter
});