Router Outlet

484 views

It acts as a placeholder that Angular dynamically fills based on the current router state. Each outlet can have a unique name, determined by the optional name attribute. The name cannot be set or changed dynamically. If not set, the default value is “primary”.

<router-outlet></router-outlet>
<router-outlet name='left'></router-outlet>
<router-outlet name='right'></router-outlet>

Named outlets can be the targets of secondary routes. The Route object for a secondary route has an outlet property to identify the target outlet:

{path: <base-path>, component: <component>, outlet: <target_outlet_name>}

Using named outlets and secondary routes, you can target multiple outlets in the same RouterLink directive.