Routing In Angular
Routing in Angular allows you to create Single Page Applications (SPAs) by navigating between components without reloading the whole page. You can define routes to different views/components and switch between them using Angular Router.
1. What is Angular Routing?
Angular routing is a mechanism that maps a URL path to a component. It lets users navigate across different components via URL without reloading the page.
Example: If a user navigates to /home, the HomeComponent will be displayed. If they go to /about, the AboutComponent will load.
2. Setting Up Routing
Step 1: Create Components
Use Angular CLI to generate components:
ng generate component home
ng generate component about
Step 2: Configure Routes in AppRoutingModule
Angular CLI creates a separate file called app-routing.module.ts. Define routes here:
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: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }, // Default route
{ path: '**', redirectTo: '/home' } // Wildcard for 404s
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Step 3: Import AppRoutingModule in App Module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 4: Add Router Outlet in Template
The <router-outlet> acts as a placeholder where routed components will render.
<h1>My Angular App</h1>
<nav>
<a routerLink="/home">Home</a> |
<a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>
3. Navigating Between Routes
You can use:
routerLinkdirective in HTMLRouter.navigate()method in TypeScript
HTML Navigation using routerLink
<a routerLink="/home">Home</a>
<a routerLink="/about">About</a>
Programmatic Navigation using Router
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-home',
template: `< button(click) = "goToAbout()" & gt; Go to About & lt;/ button & gt;`
})
export class HomeComponent {
constructor(private router: Router) {}
goToAbout() {
this.router.navigate(['/about']);
}
}
4. Full File Example
home.component.html
<h2>Home Component</h2>
<p>Welcome to the Home page!</p>
<button (click)="goToAbout()">Go to About</button>
about.component.html
<h2>About Component</h2>
<p>This is the About page.</p>
5. Wildcard and Redirect Routes
You can set a default route or a wildcard to catch unknown URLs.
'': Default path'**': Wildcard route for 404 handling
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', redirectTo: '/home' }
];
Conclusion
Routing in Angular 16 is powerful and essential for building single-page applications. With RouterModule, routerLink, and <router-outlet>, you can navigate between components efficiently without reloading the page.
This structure allows you to create scalable and interactive applications with clean URLs and a good user experience.
If you have any questions, feel free to ask. Thank you for reading!
If you have any query or question, please contact through below form. Our team will be in touch with you soon.
Please provide your valueable feedback or suggession as well.