Angular 2 căn bản - Bài 11: Stuctural 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: 4,989

Bài này chúng ta sẽ tìm hiểu cách sử dụng của 3 build in directive là ngIf, ngFor và ngSwitch

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

@Component({
    selector:'my-tutorial',
    template:`
    <h2>{{title}}</h2>
    <h3 *ngIf="showLineIf">This ngIf directive line.</h3>
    <div [ngSwitch]="color">
        <p *ngSwitchCase="'red'">This line color is red</p>
        <p *ngSwitchCase="'blue'">This line color is blue</p>
        <p *ngSwitchCase="'green'">This line color is green</p>
        <p *ngSwitchDefault>Invalid color</p>
    </div>

    <ul>
        <li *ngFor="let color of colors">{{color}}</li>
    </ul>
    `
})
export class TutorialComponent{
    public showLineIf = false;

    public color = "23232";

    public colors: string[] = ["red","green","blue"];
}