Angular Routing

Overview

Angular Routing allows navigation between different components in a Single Page Application (SPA) without reloading the page.

It maps URL paths to components and dynamically loads them inside the application.

Routes define the relationship between a URL path and a component.

Example:

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

<router-outlet> is a directive that acts as a placeholder where routed components are displayed.

Example:

Used in HTML to navigate between routes.

Example:

Home About

You can navigate using the Router service.

Example:

constructor(private router: Router) {}

goHome() { this.router.navigate(['/home']); }