Angular — Introduction to named router outlet and a hack for custom URL

Router outlet is one of the most frequently used elements in Angular to design modern websites. Here I would like to introduce a more advanced and lesser known feature of router outlet — named router outlet. This is a very powerful feature of Angular router that is capable to tackle some difficult use cases. Besides, I would like to introduce a hack to create your own URL, which you may want to use together with the named router outlet.

Image from Peter Cohen

What is named router outlet?

It is a feature designed for applications with multiple router outlets. A single router outlet is usually enough for most modern websites with clean and intuitive designs. Yet, for websites that need more robust functionalities, such as admin consoles, having multiple outlets can be a good choice to support more dynamic and flexible content.

In simple, named router outlets are simply router outlets with name.

<router-outlet name="outlet-a"></router-outlet>
<router-outlet name="outlet-b"></router-outlet>

When there are multiple outlets, the names are important as they help Angular to determine where the subpages should go to.

The use cases of multiple named router outlets

The major benefit of using multiple named router outlets is good flexibility of page layout. For example, assume we have a vertical layout with three sections:

We have three subpages and we want them to be interchangeable within all three sections:

Making this kind of layout with the traditional single outlet approach is very difficult. It needs either excessively creating components for each potential combination or very…