Angular 2 Core Directives NgStyle and NgClass

core-directives-ngstyle-ngclass.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]="'Spiderman'" marvel="true"></hero>
                <hero id="4" name="Batgirl"></hero>
                <hero id="3" name="Hulk" marvel="true"></hero>
                <hero id="5" name="Robin"></hero>
                <hero id="6" name="Flash"></hero>
            </heroes>
        `
})
export class App {


}

bootstrap(App);

hero.ts

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

    @Input()
    id: number;

    @Input()
    name:string;

    @Input()
    marvel = false;
    
}

heroes.ts

export const BLUE = '#b13138';
export const RED = '#1976d2';


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

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

    get styles() {
        return {
            color: 'blue',
            'text-decoration': 'underline'
        };
    }

    classes(hero: Hero) {
        return {
            marvel:hero.marvel,
            hulk: hero.name === 'Hulk'
        };
    }

}