Angular 9/8 How-To: What is the Router-Outlet and how to use it?

What's the Router Outlet in Angular?

The router-outlet is a directive that's available from the @angular/router package and is used by the router to mark where in a template, a matched component should be inserted.

Thanks to the router outlet, your app will have multiple views/pages and the app template acts like a shell of your application. Any element, you add to the shell will be rendered in each view, only the part marked by the router outlet will be changed between views.

Tell Angular 9 to Add Routing

If you have generated your project with Angular 9 CLI and instructed the CLI to add routing to your project either using the --routing flag or answered with Yes when prompted if Would you like to add routing?, you'll automatically have a <router-outlet> added to the main application template that exists in the src/app/app.component.html file associated with the root App component.

Now, how do you create Angular 9 Views?

It's quite easy, especially that you have routing already set up in your project thanks to Angular CLI.

You can think of a view as an Angular component that's mapped to or associated with a unique URL path.

You can do the mapping between a component and a URL path in the routing configuration module which is already generated by Angular CLI in the src/app/app-routing.module.ts file.

Inside the routes array, you simply add a route as follows supposed that you have a home component in your app:

{path: 'home', component: HomeComponent }

After adding this route, the router will render the home component inside the router outlet when the home path is matched.

Naming a Router Outlet?

The router outlet can be given a name using the name property as follows:

<router-outlet  name="mainOutlet"></router-outlet>

Adding Multiple Router-Outlets

You can have multiple outlets in your Angular template:

<router-outlet></router-outlet>  
<router-outlet  name="sidebar"></router-outlet>  

The unnamed outlet is the primary outlet in your app and except for the primary outlet, all the other outlets must have a name.

The Route Outlet Property

If you have multiple outlets in your template, you can specify the router outlet where you want to insert the route component using the outlet property of a route as follows:

{path: 'home', component: HomeSidebarComponent, outlet: "sidebar" }

In this case, when the home path is matched the HomeSidebarComponent will be inserted in the router outlet named sidebar. This route is called an auxiliary route because it's mapped to the secondary outlet.

Routes that are mapped to the primary outlet are called primary routes.

Conclusion

In this quick post we have seen what a router outlet is in Angular 9, and how to name and create multiple outlets. We have also seen the difference between the primary and auxiliary routes.

• Date: 27 Dec 2019