Angular: adjacent router outlets


Source code available here: https://stackblitz.com/edit/angular-fk3ztp

App’s preview available here: https://angular-fk3ztp.stackblitz.io


Description

Angular supports only one primary router outlet within a component’s template. However, you can use multiple secondary outlets, so called named outlets. The feature may help you to create an application which has several slots for rendering content based on independent routing configuration.

Goal

The main aim of today’s exercise is to get familiar with secondary router outlets by extending the application from previous posts of the series. You will add a part of view responsible for rendering either contest or contact form component.


Solution

Let’s start with creating a routing module for the corresponding app module.

The second and third routes have an outlet property. It indicates the target outlet below which a component will be mounted. If the property is not defined, the primary outlet is assumed by default.

In order to make use of the named outlet, you need to add it to a component’s template and enable navigation.

The secondary outlet is rendered within the app component. Notice the presence of name attribute with the same value as the outlet property for a route definition.

Basic navigation is accomplished with the aid of two buttons with the routerLink directive. At first sight it may seem a little bit complicated, however the only difference is that you need to provide link parameters array for a named outlet. If only the primary outlet is present within a template, you don’t need to use the syntax from the above example, since it’s assumed that you want to navigate within the primary outlet.

I will cover imperative and declarative navigation in detail in my next post of the series.


Remarks

  • secondary outlets enable changing view within each outlet independently. You can navigate between cars list and car detail view without altering the content of the secondary outlet,
  • navigation within the secondary outlet results in URL upadte,
  • you can perform navigation within multipe outlets using Router instance navigate method or with the aid of routerLink directive by providing link parameter arrays for each named outlet.

Like, love, hate, clap!