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
});