Angular 2+ での表示/非表示制御

Angular 2+ での ngShow と ngHide の同等物

Angular 2+ では、ngShow と ngHide の直接的な同等物は存在しません。しかし、同じ機能を実現するために、以下のような方法を使用することができます。

*ngIf ディレクティブ

• 以下のように使用します：
• *ngIf は、条件に基づいて要素を表示または非表示にするための最も一般的な方法です。

<div *ngIf="condition">
  </div>

[hidden] 属性バインディング

• [hidden] 属性は、要素を非表示にするかどうかを制御します。

<div [hidden]="!condition">
  </div>

テンプレート変数と ngIf の組み合わせ

• テンプレート変数と ngIf を組み合わせて、より複雑な条件に基づいて要素を表示または非表示にすることができます。

<ng-template #templateRef>
  </ng-template>

<div *ngIf="condition; then templateRef"></div>

注意

• *ngIf や [hidden] 属性を使用することで、より効率的で読みやすいコードを作成することができます。
• ngShow と ngHide は、Angular 1.x で使用されていたディレクティブです。Angular 2+ では、これらのディレクティブは非推奨となっています。

Angular 2+ での表示/非表示制御の例

<div *ngIf="showElement">
  This element will be shown if showElement is true.
</div>

<div [hidden]="!showElement">
  This element will be shown if showElement is true.
</div>

<ng-template #templateRef>
  This content will be shown if condition is true.
</ng-template>

<div *ngIf="condition; then templateRef"></div>

<div *ngIf="showElement">
  showElement が true の場合、この要素が表示されます。
</div>

<div [hidden]="!showElement">
  showElement が true の場合、この要素が表示されます。
</div>

<ng-template #templateRef>
  condition が true の場合、このコンテンツが表示されます。
</ng-template>

<div *ngIf="condition; then templateRef"></div>

CSS クラスの切り替え

• [ngClass] ディレクティブを使用して、条件に基づいて CSS クラスを切り替えることができます。

<div [ngClass]="{'hidden': !showElement}">
  This element will be hidden if showElement is false.
</div>

パイプの使用

• ngIf や [hidden] と組み合わせて、パイプを使用して条件に基づいて値をフォーマットすることができます。

<div *ngIf="myValue | myPipe">
  This element will be shown if myPipe returns a truthy value.
</div>

カスタムディレクティブ

• カスタムディレクティブを作成して、より複雑な表示/非表示制御を実装することができます。

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appShowHide]'
})
export class ShowHideDirective {

  @Input() appShowHide: boolean;

  constructor(private el: ElementRef) {}

  ngOnInit() {
    this.el.nativeElement.style.display = this.appShowHide ? 'block' : 'none';
  }
}

<div appShowHide [appShowHide]="showElement">
  This element will be shown or hidden based on showElement.
</div>

<div [ngClass]="{'hidden': !showElement}">
  showElement が false の場合、この要素は非表示になります。
</div>

<div *ngIf="myValue | myPipe">
  myPipe が真の値を返す場合、この要素が表示されます。
</div>

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appShowHide]'
})
export class ShowHideDirective {

  @Input() appShowHide: boolean;

  constructor(private el: ElementRef) {}

  ngOnInit() {
    this.el.nativeElement.style.display = this.appShowHide ? 'block' : 'none';
  }
}

<div appShowHide [appShowHide]="showElement">
  showElement に基づいて、この要素が表示または非表示になります。
</div>