Angular routing is a feature that allows navigation between different views or components in a single-page application (SPA). Routes are defined using the RouterModule and configured with path-component mappings in a routing module.
What is Angular routing and how do you define routes?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Overview
Angular’s routing system enables navigation between different views or components without reloading the page. It turns your Angular application into a single-page application (SPA) — meaning that instead of fetching new HTML pages from the server, it dynamically updates the view based on the URL.
How Routing Works
The Angular Router maps URL paths to specific components. When the browser’s address changes, Angular determines which component to display by matching the URL with a defined route configuration.
TYPESCRIPT
// Example: 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';
import { ContactComponent } from './contact/contact.component';
const routes: Routes = [
{ path: '', component: HomeComponent }, // default route
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
{ path: '**', redirectTo: '' } // wildcard route for 404s
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
Defining Routes
Each route is defined as an object in the Routes array with at least a path and a component property:
- path – the URL segment (e.g., 'about').
- component – the component to render when the path is matched.
HTML
<!-- app.component.html -->
<nav>
<a routerLink="/">Home</a>
<a routerLink="/about">About</a>
<a routerLink="/contact">Contact</a>
</nav>
<!-- Placeholder for route content -->
<router-outlet></router-outlet>
RouterModule Methods
RouterModule.forRoot(routes)– used in the root module for application-wide routing.RouterModule.forChild(routes)– used in feature modules for modular routing setups.
Navigation Methods
Angular provides two main ways to navigate:
- Declaratively with
routerLinkin templates. - Programmatically with
Router.navigate()in TypeScript.
TYPESCRIPT
// Example: programmatic navigation
import { Router } from '@angular/router';
constructor(private router: Router) {}
goToAbout() {
this.router.navigate(['/about']);
}
Route Parameters
Routes can also include dynamic parameters, allowing you to create routes that depend on variable data (e.g., user IDs).
TYPESCRIPT
// Example with route parameters
{ path: 'user/:id', component: UserDetailComponent }
TYPESCRIPT
// Accessing route parameter in component
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id');
console.log('User ID:', id);
}
Benefits of Angular Routing
- Enables smooth client-side navigation without page reloads.
- Improves performance and user experience.
- Supports route guards, parameters, and lazy loading for scalability.
- Allows nested and child routes for modular app structures.
Think of Angular routing as a GPS — it maps URLs to the right components so users can navigate your app fluidly without ever leaving the page.
Summary
- Angular routing manages navigation between components in SPAs.
- Routes are defined using
RouterModuleand configured in a routing module. routerLinkandRouter.navigate()are used for navigation.- Dynamic routes, guards, and lazy loading enhance flexibility.
Similar questions
Guides