ngx-zones

NgxZones is a library that lets you define components in sub-routes an render them in the main layout.

ngxZoneDef (directive)

ngxZoneDef defines a zone where components will be inserted. The argument is the name of the zone.

In the layout:

<h1>
    <ng-container ngxZoneDef="title"></ng-container>
</h1>

ngxZone (directive)

ngxZone applies to templates to instantiate them in a ngxZoneDef. The argument is the name of the zone. The order is used to compute the display order of the inserted components.

In a sub-route:

<ng-template ngxZone="title" order="3"> {{ title }} </ng-template>

ngx-zone (component)

ngx-zone is the same as the ngxZone directive but does not destroy and recreate the content when the name or the order change.

In a sub-route:

<ngx-zone *ngIf="hasTitle" name="title" order="3">
    <app-title></app-title>
</ngx-zone>