Angular 2 の ngIf の概念

1. CSS でコンポーネントを非表示にする vs.Angular 2 で ngIf
2. Angular 2 の ngIf の式
3. Angular 2 で ngIf を使用する手順

Angular 2 では、ngIf ディレクティブは Angular 2 で最も簡単で便利なディレクティブの 1つです。これは、式の評価に基づいて HTML 要素を条件付きで表示または非表示にするために使用されます。

ngIf ディレクティブは式を評価し、true と評価された場合、指定された要素をレンダリングします。そうでない場合、その要素はまったくレンダリングされません。

このディレクティブは、複数のビューが共通の特性を共有する場合に DOM 要素の数を減らすのに役立ちます。

この記事では、ngIf についてすべて説明します。

CSS でコンポーネントを非表示にする vs.Angular 2 で ngIf

HTML には if ステートメントがありませんが、CSS の show 属性と visibility 属性を使用してページのセクションを非表示にすることができます。

JavaScript を使用して、HTML 要素に CSS プロパティを追加または削除したり、ページから要素を非表示にしたりできます。ただし、これは ngIf と同じではありません。

要素が ngIf で非表示になっている場合、その要素はページに存在しません。

Chrome Dev Tools を使用してページを調査する場合、DOM に HTML 要素は表示されません。

Angular 2 の ngIf の式

ngIf ディレクティブは、ブール値だけでなく、有効な Typescript フレーズを入力として受け入れます。次に、表現の完全性を評価して、要素を表示するかどうかを決定します。

ブール値に加えて、テキスト、配列、およびオブジェクトを ngIf に送信する場合もあります。

Angular 2 で ngIf を使用する手順

Angular 2 で ngIf を使用するには、次の手順に従う必要があります。

例：

Angular 2 の ng-if の完全な例について説明しましょう。

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: 
    `<h1 *ngIf=" 34< 100" >I'm Adil</h1> 
    <h1 *ngIf="3>1" > I'm John</h1>
    <h1 *ngIf="46<200" >I'm Steven</h1>`,
})
export class AppComponent  {
 }

上記のコードのライブデモを確認するには、ここををクリックしてください。