Angular 2 căn bản - Bài 12: Attribute Directives

bởi Bạch Ngọc Toàn vào 23/01/2017 thuộc Lập trình Angular 2 căn bản . Lượt xem: 6,390

Bài này chúng ta sẽ học 2 buit-in directive trong Angular 2 là ngClass và ngStyle nằm trong loại directive thứ 2 là Attribute Directive.

import { Component } from '@angular/core';

@Component({
    selector: 'my-tutorial',
    template: `
    <h2>{{title}}</h2>
    <p [ngClass]="{classOne:cone,classTwo:ctwo}">This ngClass apply style</p>
    <button (click)="toggle()">Toggle</button>
    <p [ngStyle]="{'font-style':style,'font-size':size}">This paragaph will be apply to ngStyle</p>
    `,
    styles: [
        `
        .classOne{
            color:yellow;
        }
        .classTwo{
            background-color:black;
        }
        `
    ]
})
export class TutorialComponent {
    public cone = true;
    public ctwo = true;
    public style="italic";
    public size="30px";
    toggle(){
        this.cone = !this.cone;
        this.ctwo = !this.ctwo;
    }
}