Router-Outlet In Angular

Router-outlet in Angular is used to load the different components based on the router status, or we can say that it acts as a placeholder to load the dynamic components based on the activated route.

Introduction

Router-outlet in Angular works as a placeholder which is used to load the different components dynamically based on the activated component or current route state. Navigation can be done using router-outlet directive and the activated component will take place inside the router-outlet to load its content.

To enable routing, we need to use router-outlet into our HTML template like this.

<router-outlet></router-outlet>

To get a better idea about that, let’s implement a simple routing demo with three different pages, and using the below npm commands, we are going to create three different components.

// To generate dashboard component
Ng generate component dashboard

// To generate about component
Ng generate component about

// To generate contact component
Ng generate component contact

We have generated three different components. By using these components, we will proceed with the routing configuration.

Our first step is to create a common routing configuration file where we can keep our routing logic. For that, create a new file inside the app folder named app.routes.ts.

App.routes.ts

This file contains basic routing configurations like array of routes and all the separate routes contain appropriate route name with their component name along with path match strategy.

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

const appRoutes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'about', component: AboutComponent },
    { path: 'contact', component: ContactComponent },
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

All three files which we have used are simple files which contain the basic lines of text to identify that they come from different files based on the component name.

Let’s see the content of each file in a sequence.

Dashboard.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'dashboard',
  template:`<hr/><div>
  <h1> Simple Routing Demo By : Manav Pandya </h1>
  <h3>You can find more article , <a target="_new" href="https://www.c-sharpcorner.com/members/manav-pandya">click here</a></h3>
  </div>`,
  styleUrls: [  ]
})
export class DashboardComponent  implements OnInit  {
}

About.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'about',
  template:`
  <hr/><h1>Hello From About Us Page</h1>`,
})
export class AboutComponent  {
}

Contact.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'contact',
  template:`
  <hr/><h1>Hello From Contact Us Page</h1>`,
})
export class ContactComponent {}

So far, we have configured routing part as well as the entire component list which we are going to use in this demo. Now, let’s quickly run this demo and see the output.

 

As you can see into the above image there are different links with the appropriate component name and whenever we click on the link, it will load a new component, but the main thing is how it loads the component based on the route status.

For that, we just need to open the developer tools and you can see the output by changing the component like this.

 

Conclusion

 

In this quick demo for the routing configuration, we have seen the use of router-outlet and how important its role is. I would recommend you to try a differently named router-outlet to find the difference between them.

 

Thanks for reading.