Router Outlet in Angular

The router-outlet directive in Angular acts as a placeholder that Angular dynamically fills based on the current router state. This tutorial covers the basics of setting up and using the router-outlet directive effectively in your Angular applications.

Setting Up Router Outlet

To set up the router-outlet, 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

Named Router Outlets

Named router outlets allow you to target multiple outlets in a single Angular application. Here’s an example:

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

// app.component.html

Key Points

Conclusion

The router-outlet directive is essential for managing navigation and views in your Angular applications. By understanding and using router-outlet effectively, you can create dynamic and user-friendly applications with smooth navigation. Happy coding!