Router Module in Angular

The Router Module in Angular provides a way to manage navigation and views in your application. This tutorial covers the basics of setting up and using the Router Module effectively in your Angular applications.

Setting Up Router Module

To set up the Router Module, you need to import the necessary modules and define your application routes:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

@NgModule({
  declarations: [AppComponent, HomeComponent, AboutComponent],
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: '
Home Component
',
})
export class HomeComponent { }

// about.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  template: '
About Component
',
})
export class AboutComponent { }

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

// app.component.html

Using RouterLink and RouterOutlet

Use the routerLink directive to define navigation links and the router-outlet directive to display the routed components:

// app.component.html

Handling Navigation

To handle navigation in Angular, you can use the Router service. Here’s an example of navigating programmatically:

// app.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router) {}

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

// app.component.html
Go to About

Child Routes

Child routes allow you to define nested routes. Here’s an example of setting up child routes:

// app.module.ts
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent, children: [
    { path: 'info', component: InfoComponent }
  ]}
];

// info.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-info',
  template: '
Info Component
',
})
export class InfoComponent { }

// app.module.ts
@NgModule({
  declarations: [AppComponent, HomeComponent, AboutComponent, InfoComponent],
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// about.component.html
About Component
More Info

Key Points

Conclusion

The Router Module in Angular is essential for managing navigation and views in your single-page applications. By understanding and using the Router Module effectively, you can create dynamic and user-friendly applications with smooth navigation. Happy coding!