I'm trying to use
ng-content
<standard-layout class="blah">
<sample-navigation *navBarItem></sample-navigation>
<sample-navigation *navBarItem></sample-navigation>
<sample-form-1 *contentItem></sample-form-1>
<sample-form-2 *contentItem></sample-form-2>
<sample-form-3 *contentItem></sample-form-3>
<sample-navigation *actionBarItem></sample-navigation>
<sample-navigation *actionBarItem></sample-navigation>
</standard-layout>
contentItem
@Directive(selector: '[contentItem]')
class ContentItemDirective implements AfterContentInit {
final ViewContainerRef vcRef;
final TemplateRef template;
final ComponentResolver componentResolver;
ContentItemDirective(this.vcRef, this.template, this.componentResolver);
ComponentRef componentRef;
@override
ngAfterContentInit() async {
final componentFactory =
await componentResolver.resolveComponent(ContentItem);
componentRef = vcRef.createComponent(componentFactory);
(componentRef.instance as ContentItem)
..template = template;
}
}
ContentItem
@Component(
selector: "content-item",
host: const {
'[class.content-item]': true,
},
template: """
<template [ngTemplateOutlet]="template"></template>
""",
directives: const [NgTemplateOutlet]
)
class ContentItem {
TemplateRef template;
}
standard-layout
<ng-content select=""></ng-content>
<ng-content select=".content-item"></ng-content>
content-item
<ng-content select="[content-item]"></ng-content>
select=...
Managed to get it working using @ContentChildren
Inside my StandardLayout
component, I filtered the inputs using:
@ContentChildren(ContentItemDirective)
QueryList<ContentItemDirective> contentItems;
@ContentChildren(ActionBarItemDirective)
QueryList<ActionBarItemDirective> actionBarItems;
@ContentChildren(NavBarItemDirective)
QueryList<NavBarItemDirective> navBarItems;
Now inside the standard-layout
template, can loop through the items and display the template using ngTemplateOutlet
<nav class="nav1" #nav1>
<div *ngFor="let item of navBarItems">
<template [ngTemplateOutlet]="item.template"></template>
</div>
</nav>
<div class="content" #content>
<div *ngFor="let item of contentItems">
<template [ngTemplateOutlet]="item.template"></template>
</div>
</div>
<nav class="nav2" #nav2>
<div *ngFor="let item of actionBarItems">
<template [ngTemplateOutlet]="item.template"></template>
</div>
</nav>