Angular で表示および非表示

Angular でコンポーネントや要素を表示および非表示にする例を紹介します。

Angular で表示および非表示

商用アプリケーションを開発するときは、ユーザーの役割や条件に基づいて一部のデータを非表示にする必要があります。そのアプリケーションの条件に従って、同じデータを表示する必要があります。

このチュートリアルでは、条件に基づいてデータを表示および非表示にする簡単な方法を紹介します。

次のコマンドを使用して、新しいアプリケーションを作成しましょう。

# angular
ng new my-app

Angular で新しいアプリケーションを作成したら、このコマンドを使用してアプリケーションディレクトリに移動します。

# angular
cd my-app

それでは、アプリを実行して、すべての依存関係が正しくインストールされているかどうかを確認しましょう。

# angular
ng serve --open

条件が true の場合にのみ表示し、false の場合は非表示にするテンプレートまたはコードブロックがあるとします。この例を使用して、表示と非表示を切り替えることができます。

まず、app.component.html に見出し、段落、入力フィールドを含むデモコンテンツを作成し、それを div でラップします。

# Angular
<div>
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element"/>
</div>

ここで、app.component.ts で、新しい変数 element を作成し、それを false として設定します。

# Angular
element = false;

*ngIf を使用して、条件に基づいて div を表示および非表示にします。

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element"/>
</div>

上記の例でわかるように、element が true の場合は条件を設定し、div が表示され、条件が false の場合は表示されません。

したがって、element を false に設定したため、div は非表示になります。それでは、element の値を true に変更して、どのように機能するかを確認しましょう。

出力：

これで、element の値を変更すると、div に設定した条件が変更され、すべての要素が含まれる div が表示され始めたことがわかります。

特定のボタンがクリックされるたびにデータを表示および非表示にする場合を想像してみてください。同じ*ngIf を使用して、この簡単な例を作成できます。

次に、showData() と hideData() の 2つの関数を持つ 2つのボタンを作成しましょう。これらの 2つのボタンは、条件が false に変更されたときに非表示にならないように、div の外側に作成する必要があります。

したがって、app.component.html のコードは次のようになります。

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element" />
</div>
<button (click)="showData()">Display Data</button>
<button (click)="hideData()">Hide Data</button>

それでは、これら 2つの関数を app.component.ts で作成しましょう。showData() は element の値を true に変更し、hideData() は element の値を false に変更します。

したがって、コードは次のようになります。

# Angular
showData() {
    return (this.element = true);
  }
  hideData() {
    return (this.element = false);
  }

次に、ボタンの見栄えを良くするために CSS コードを追加します。

# Angular
button{
  margin-top: 10px;
  padding: 10px;
  background-color: aquamarine;
  border: none;
  margin-right: 10px;
}

それがどのように機能するかを確認しましょう。

出力：

上記の例でわかるように、*ngIf およびボタン (click) メソッドを使用して、コンテンツを簡単に非表示および表示できます。

コンテンツが非表示のときにデータの非表示ボタンを表示するときにデータの表示ボタンを非表示にする場合は、ボタンにも同じ概念を使用できます。

したがって、element が true の場合は*ngIf 条件を作成し、データの非表示ボタンのみが表示され、element が false の場合はデータ表示ボタンが表示されます。

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element" />
</div>
<button *ngIf="element == false" (click)="showData()">Display Data</button>
<button *ngIf="element == true" (click)="hideData()">Hide Data</button>

作成した関数と*ngIf 関数はボタンで同じことを実行するのに役立つため、app.component.ts ファイルにコードを 1 行も記述する必要はありません。それでは、結果を確認してみましょう。

出力：

今回のチュートリアルでは、*ngIf を使って条件に応じてコンテンツを表示・非表示にする方法と、ボタンの (click) メソッドを使ってボタンのクリック時にデータを表示・非表示にする方法を学びました。