Jan Vladimir Mostert Jan Vladimir Mostert - 1 year ago 68
Dart Question

Can't get ng-content's select to filter correctly

I'm trying to use

to selectively display certain components in certain areas, but I'm not getting the filtering to work correctly.

I have a layout component which contains certain components which are marked with directives where they need to render.

<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>

This is my

@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;

ngAfterContentInit() async {
final componentFactory =
await componentResolver.resolveComponent(ContentItem);
componentRef = vcRef.createComponent(componentFactory);
(componentRef.instance as ContentItem)
..template = template;


This is what my
looks like

selector: "content-item",
host: const {
'[class.content-item]': true,
template: """
<template [ngTemplateOutlet]="template"></template>
directives: const [NgTemplateOutlet]
class ContentItem {
TemplateRef template;

Inside the
's template, when I do
<ng-content select=""></ng-content>
, it displays all the components as expected.

When I try and filter the components, it doesn't seem to work:

CSS Filtering displays nothing:

<ng-content select=".content-item"></ng-content>

Filtering on the
tag itself display nothing either:

<ng-content select="[content-item]"></ng-content>

I've tried many permutations of the
and just can't seem to get it working. Any ideas?

I'm on the Angular Dart 3.0.0 package.

Answer Source

Managed to get it working using @ContentChildren

Inside my StandardLayout component, I filtered the inputs using:

QueryList<ContentItemDirective> contentItems;

QueryList<ActionBarItemDirective> actionBarItems;

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 class="content" #content>    
            <div *ngFor="let item of contentItems">
                <template [ngTemplateOutlet]="item.template"></template>    

        <nav class="nav2" #nav2>
            <div *ngFor="let item of actionBarItems">
                <template [ngTemplateOutlet]="item.template"></template>    
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download