10.0.0 • Published 4 years ago
ngx-zones v10.0.0
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>