The true power of router-first architecture comes to fruition with the use of auxiliary routes, where we can influence the layout of components solely through router configuration, allowing for rich scenarios where we can remix the existing components into different layouts. Auxiliary routes are routes that are independent of each other where they can render content in named outlets that have been defined in the markup, such as <router-outlet name="master"> or <router-outlet name="detail">. Furthermore, auxiliary routes can have their own parameters, browser history, children, and nested auxiliaries.
In the following example, we will implement a basic master/detail view using auxiliary routes:
- Implement a simple component with two named outlets defined:
src/app/manager/user-management/user-manager.component.ts
template: `
<div class="horizontal-padding">
<router-outlet name="master"></router-outlet>
<div style...