Angular 4 - The Basics 筆記（4）: Directives

component is a kind of a  directive 

normally we use attribute selector

• *ngIf="data"

  @Component({
    selector: 'ng-if-else',
    template: `
      <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
      show = {{show}}
      <br>
      <div *ngIf="show; else elseBlock">Text to show</div>
      <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
  `
  })
  class NgIfElse {
    show: boolean = true;
  }

   

• *ngIf else

  <div *ngIf="condition as value; else elseBlock">{{value}}</div>
  <ng-template #elseBlock>...</ng-template>

• *ngFor

  <li *ngFor="let user of userObservable | async as users; index as i; first as isFirst">
     {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
  </li>