Router Outlet

In this tutorial, we will discuss one of the most important components in Angular, the Router Outlet. This directive acts as a placeholder for loading different components dynamically based on the navigation path. It's a critical part of Angular's routing system, which allows you to create single-page applications (SPAs) with multiple views and navigation.

Basics of Router Outlet

<router-outlet> is a built-in directive provided by Angular. When you define routes in your application, you map them to different components. The Router Outlet directive is used as a placeholder in the template where these components are loaded dynamically based on the current URL.

Let's suppose we have two components, HomeComponent and AboutComponent. We want to navigate between these two components. We will define routes for these components and use <router-outlet> to load them.

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

In the template, we would use the Router Outlet like this:

<router-outlet></router-outlet>
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>

When you navigate to /home, the HomeComponent will be loaded into the Router Outlet. Similarly, when you navigate to /about, the AboutComponent is loaded.

Nested Router Outlets

Angular also supports nested outlets, that is, you can have a Router Outlet inside another Router Outlet. This is useful when you have complex UI with nested views. For example, in an e-commerce application, you may have a product list component and a product detail component. You can use a nested Router Outlet to load the product detail component when a product is selected.

const routes: Routes = [
  { 
    path: 'product', 
    component: ProductListComponent,
    children: [
      { path: ':id', component: ProductDetailComponent }
    ] 
  }
];

Here, ProductListComponent is loaded into the parent Router Outlet and ProductDetailComponent is loaded into the nested Router Outlet.

Router Outlet Events

The Router Outlet directive emits events that you can listen to. The activate event is emitted when a new component is being loaded into the Router Outlet. The deactivate event is emitted when a component is being removed.

<router-outlet 
  (activate)="onActivate($event)" 
  (deactivate)="onDeactivate($event)">
</router-outlet>

In the component:

onActivate(event: any) {
  console.log('Activated Component', event);
}

onDeactivate(event: any) {
  console.log('Deactivated Component', event);
}

Conclusion

In this tutorial, we covered the basics of the Router Outlet directive in Angular. We learned how to define routes and load different components into the Router Outlet based on the navigation path. We also discussed advanced topics like nested outlets and Router Outlet events.

The Router Outlet is a powerful directive that enables you to create complex UI with multiple views and navigation. With a good understanding of this directive, you can leverage the full power of Angular's routing system.