Member-only story
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.
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.
