Advanced Routing Techniques

Router Events - Tracking the Journey

1import { Router, NavigationStart, NavigationEnd } from '@angular/router';
2
3@Component({...})
4export class AppComponent {
5  private router = inject(Router);
6  isLoading = false;
7
8  constructor() {
9    this.router.events.subscribe(event => {
10      if (event instanceof NavigationStart) {
11        this.isLoading = true;
12      }
13      if (event instanceof NavigationEnd) {
14        this.isLoading = false;
15      }
16    });
17  }
18}

Preloading Strategies

1import { PreloadAllModules } from '@angular/router';
2
3// app.config.ts
4export const appConfig: ApplicationConfig = {
5  providers: [
6    provideRouter(routes,
7      withPreloading(PreloadAllModules)
8    )
9  ]
10};

Named Outlets - Multiple Gates

1// Routes
2{
3  path: 'chat',
4  component: ChatComponent,
5  outlet: 'sidebar'
6}
7
8// Template
9<router-outlet></router-outlet>
10<router-outlet name="sidebar"></router-outlet>
11
12// Link
13<a [routerLink]="[{ outlets: { sidebar: ['chat'] } }]">
14  Open chat
15</a>

Title Strategy

1// routes
2{
3  path: 'samurai/:id',
4  component: SamuraiDetailComponent,
5  title: 'Samurai Profile'
6}
7
8// Dynamic title
9{
10  path: 'samurai/:id',
11  component: SamuraiDetailComponent,
12  title: (route) => \`Samurai #\${route.paramMap.get('id')}\`
13}