core-directives-ng-for.ts

@Component({ 
    selector: 'app',
    directives: [Hero, Heroes],
    template: `
            <heroes>
                <hero id="1" name="Superman"></hero>
                <hero id="2" name="Batman"></hero>
                <hero id="3" name="Batgirl"></hero>
                <hero id="3" name="Robin"></hero>
                <hero id="4" name="Flash"></hero>
                <hero id="5" name="Green Lantern"></hero>
            </heroes>
        `
})
export class App {

}

bootstrap(App);

hero.ts

@Directive({
    selector: 'hero',
})
export class Hero {

    @Input()
    id: number;

    @Input()
    name:string;
    
}

heroes.ts

const HEROES = [
    {id: 1, name:'Superman'},
    {id: 2, name:'Batman'},
    {id: 5, name:'BatGirl'},
    {id: 3, name:'Robin'},
    {id: 4, name:'Flash'}
];

@Component({
    selector:'heroes',
    template: `
    <table>
        <thead>
            <th>Name</th>
            <th>Index</th>
        </thead>
        <tbody>
            <tr *ngFor="let hero of heroes; let i = index">
                <td>{{hero.name}}</td>
                <td>{{i}}</td>
            </tr>
        </tbody>
    </table>
`
})
export class Heroes {

     @ContentChildren(Hero)
     heroes: QueryList<Hero>;

}