angular - How do i access ng-content?

Question

I would like to access the contents of ng-content, to start with just to get a count of content elements, but with more awesomeness later.

For example:

@Component({
selector: 'my-container',
template: `
    <div class="my-container">
        <div class="my-container-nav"><a class="my-container-previous"></a></div>
        <div class="my-container-body">
            <div class="my-container-items">
                <ng-content></ng-content>
            </div>
        </div>
        <div class="my-container-nav"><a class="my-container-next"></a></div>
    </div>  
`
})
export class MyContainer implements AfterContentInit {
    @ContentChildren(???) containerItems : QueryList<???>;
    ngAfterContentInit() {
        console.log('after content init: ' + this.containerItems.length);
    }
}

What do I put as the type for the content children?

They could be anything. I tried ElementRef, but that didn't work and always gave a count of zero.

Example of use:

<my-container>
    <div>some content here</div>
    <another-component [title]="'another component there'"></another-component>
    <div>there's lots of content everywhere</div>
    <span>no assumptions would be fair</span>
</my-container>

I would expect to see 'after content init: 4'.

Answer 1

I have misunderstood @ContentChildren. It does not represent all content. It represents @Components in ng-content.

To directly answer the question:

it is still unclear how i would acquire @Components inside ng-content if i don't know their types ahead of time. But i realise now that was a bit silly: if i don't know what they are, what exactly do i think i'm going to do with them?

To indirectly answer the question:

to access all the contents of ng-content i can introduce a template variable (#items) into the parent of the ng-content and reference that via @ViewChild as an elementRef. Then the children can be counted this way:

@Component({
selector: 'my-container',
template: `
    <div class="my-container">
        <div class="my-container-nav"><a class="my-container-previous"></a></div>
        <div class="my-container-body">
            <div #items class="my-container-items">
                <ng-content></ng-content>
            </div>
        </div>
        <div class="my-container-nav"><a class="my-container-next"></a></div>
    </div>  
`
})
export class MyContainer implements OnInit {
    @ViewChild('items') items: ElementRef;
    ngOnInit() {
        console.log('count is: ' + this.items.nativeElement.children.length);
    }
}

For others facing similar confusion, i can expand on @ContentChildren a bit more. Say i have 2 @Components: component-a and component-b and i know that consumer will place these inside the content of my component:

<my-component>
    <component-a></component-a>
    <div>random html</div>
    <component-b></component-b>
    <component-a></component-a>
</my-component>

Then in my-component i can aquire references to all instances of the individual component types:

export class MyContainer implements AfterContentInit {
    @ContentChildren(ComponentA) componentAInstances: QueryList<ComponentA>;
    @ContentChildren(ComponentB) componentBInstances: QueryList<ComponentB>;
    ngAfterContentInit() {
        console.log('count of component A: ' + this.componentAInstances.length);
        console.log('count of component B: ' + this.componentBInstances.length);
    }
}

And the console will show that there are 2 component A's and 1 component B.

I should point out that this is at release candidate 4.