How to iterate over Angular 2 ng-content elements?

Question

Does anyone know how to iterate over Angular 2 ng-content elements?

I need to check which attribute values ​​differ for elements inside ng content. Does anyone know how to get them?

The best scenario is to get the actual instances of the components inside it, because I may have some internal properties set inside the components, and access to them directly will be great!

Code example:

// ====================== Container Component ======================= import * as ng from "angular2/angular2"; @ng.Component({ selector: 'grid-layout', lifecycle: [ng.onInit] }) @ng.View({ templateUrl: `<div><ng-content></ng-content></div>` }) export class GridLayout { constructor(){ } private onInit(): void { // ??? something like this.ngContent would be great :) } } // ====================== Caller Component ======================= import * as ng from "angular2/angular2"; @ng.Component({ selector: 'my-page' }) @ng.View({ templateUrl: ` <grid-layout> <div data-att1="container 1">1</div> <div data-att2="container 2">2</div> <div>3</div> </grid-layout>`, directives:[GridLayout] }) export class MyPage { constructor(){ } } 

Answer 1

Just enter the contents of the DOM with @ContentChildren

 ParentComponent implements AfterContentInit{ @ContentChildren(ChildComponent) contents : QueryList<ChildComponent>; ngAfterContentInit() { //access contents here } }