Angular Navigating Between Routes Complete Guide

1. How do you define routes in Angular?

In Angular, routes are defined using an array of Route objects. Each Route object contains properties like path and component. You then pass this array to the RouterModule.forRoot() or RouterModule.forChild() method depending on whether it's used in the root module (AppModule) or feature modules.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: 'heroes', component: HeroesComponent },
  { path: 'dashboard', component: DashboardComponent }
];

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

2. What is the difference between forRoot() and forChild()?

• RouterModule.forRoot() – This is used in the root application module (AppModule) and should receive the main routes and configuration parameters. It initializes the router at the root level.
• RouterModule.forChild() – This is used in feature modules to register additional routes. These routes are child routes of existing parent routes.

3. How to use router links to navigate in Angular?

Use <a routerLink="/target">Target component</a> instead of traditional HTML anchor tags with href. The advantage of routerLink is that it manages the internal routing within Angular, preventing full page reloads.

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

4. How can you perform a programmatic navigation in Angular?

Angular’s Router service provides methods to navigate programmatically. To navigate, inject the Router into your component and use its navigate() method with the desired path array.

import { Router } from '@angular/router';

export class SomeComponent {
  constructor(private router: Router) {}

  navigateToHeroes() {
    this.router.navigate(['/heroes']);
  }
}

5. How to handle route parameters in Angular?

Route parameters are used when a section of the path is dynamic, such as /hero/:id. In the route definition, specify a parameter syntax using :. Access the parameter in the destination component via the ActivatedRoute service.

Route Definition:

  { path: 'hero/:id', component: HeroDetailComponent }

Component Code:

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

export class HeroDetailComponent implements OnInit {
  heroId!: number;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      this.heroId = +params.get('id')!;
    });
  }
}

6. How to pass data through route navigations?

Data can be passed directly through route definitions or by setting state during navigation.

Using Route Definition:

  { path: 'heroes', component: HeroesComponent, data: { title: 'All Heroes' } }

In the Destination Component:

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

export class HeroesComponent implements OnInit {
  data: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.data = this.route.snapshot.data;
  }
}

Using State During Navigation:

this.router.navigate(['heroes'], { state: { title: 'All Heroes' } });

Retrieving State in the Destination Component:

constructor(private router: Router) {
  this.data = history.state.title;
}

7. How to implement a Guard to block route access?

Route Guards control navigation to a route. One common type is CanActivate which determines if you can enter a route. First, implement a guard service and then hook it up in the routes array.

Guard Implementation:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate() {
    // Example auth check logic
    if (!this.isUserAuthenticated()) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }

  private isUserAuthenticated(): boolean {
    return false; // Replace with actual check logic
  }
}

Route Definition:

  { path: 'heroes', component: HeroesComponent, canActivate: [AuthGuard] }

8. How to display the routed components’ content in Angular?

Use the <router-outlet></router-outlet> directive at the location where you want the components specified by the routes to be displayed. Angular manages replacing content with the appropriate component based on current route.

<router-outlet></router-outlet>

9. How to handle query parameters in route navigation?

Query parameters are added after ? in the URL. Use the queryParams object in navigate() to send them programmatically, or use route snapshots to read them in the destination component.

Programmatic Navigation with Query Params:

this.router.navigate(['/heroes'], { queryParams: { filter: 'active' } });

Reading Query Params in a Component:

this.route.queryParamMap.subscribe(params => {
  const filter = params.get('filter');
});

10. How to handle redirects and wildcards in Angular routing?

• Redirects: Use { path: 'oldPath', redirectTo: '/newPath', pathMatch: 'full' } in your route definitions.
• Wildcards: For unmatched routes, a wildcard path (**) with a corresponding component can catch all errors and redirect accordingly.

Example: