Angular - ngIf ディレクティブ

Angular の ngIf ディレクティブの利用例です。

HTML テンプレート

<p>
  <input type="button" value="toggle flag" (click)="toggleFlag()">
</p>

<div #ifBlock *ngIf="flag; else elseBlock">
  This is ifBlock
</div>

<ng-template #elseBlock>
  Here is elseBlock.
</ng-template>

TypeScript

export class IfComponent implements OnInit {

  flag: boolean;


  constructor() { }

  ngOnInit() {
    this.flag = true;
  }


  toggleFlag(){
    this.flag = !this.flag;
  }
}

TypeScript の flag 変数の値に応じて表示します。flag 変数の値が true のときは #ifBlock のある div タグが、false のときは #elseBlock のある ng-template の中が表示されます。


Angular に関連するトピックは次のページにまとめてあります。

Angular 機能紹介一覧
https://kainobi2.blogspot.com/2019/02/angular.html