Routing & Navigation in Angular - Textnotes

Routing & Navigation in Angular

Angular uses the RouterModule to manage navigation between different components in a single-page application. Routing allows users to switch between views without reloading the page.

1. RouterModule

The RouterModule provides directives and services to configure routes. Import it in your AppModule:


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule],
bootstrap: [AppComponent]
})
export class AppModule { }

2. Route Configuration

Define routes in a separate file, usually app-routing.module.ts:


import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];

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

3. RouterLink & Navigation

Use routerLink in templates to navigate:


<a routerLink="/">Home</a>
<a routerLink="/about">About</a>
<router-outlet></router-outlet>

<router-outlet> is where the routed component will be displayed.

Programmatic navigation:


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

constructor(private router: Router) { }

goToAbout() {
this.router.navigate(['/about']);
}

4. Route Parameters

Pass dynamic data in the route:


{ path: 'user/:id', component: UserComponent }

Access in the component:


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

constructor(private route: ActivatedRoute) { }

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

5. Query Parameters

Pass additional parameters:


this.router.navigate(['/search'], { queryParams: { q: 'angular' } });

Access in the component:


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

6. Guards

Guards control access to routes.

6.1 AuthGuard (CanActivate)

Prevents unauthorized users from accessing a route.


canActivate(): boolean {
return this.authService.isLoggedIn();
}

6.2 CanDeactivate

Prevents leaving a route with unsaved changes.


canDeactivate(component: any): boolean {
return component.canLeave ? true : confirm("Discard changes?");
}

Add guards in routes:


{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }

7. Child Routes

Nested routes allow hierarchical views.


{
path: 'admin', component: AdminComponent,
children: [
{ path: 'users', component: AdminUsersComponent },
{ path: 'settings', component: AdminSettingsComponent }
]
}

8. Lazy-loaded Routes

Load modules only when required for better performance.


{ path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }

Summary

  1. Use RouterModule for navigation
  2. Define routes in AppRoutingModule
  3. Navigate using routerLink or programmatically
  4. Use route parameters and query parameters
  5. Protect routes using guards like CanActivate and CanDeactivate
  6. Create child routes for nested navigation
  7. Implement lazy-loaded routes to improve app performance