Anuglarの要素を非表示にした場合の挙動（ngIfとスタイルバインディングの比較)

目的

Angularでは要素を非表示にする方法として、ngIfを利用する方法、スタイルバインディングを利用してdisplayスタイプロパティを設定する方法があります。 この2種類の方法をどのように使い分けるのか気になったので調査してみました。 ※Angular11にて確認を行っています。

準備

以下コードで実際の挙動を検証していきます。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  show = true;

  onClickChange() {
    console.log("A");
    this.show = !this.show;
  }
}

<div>
  <div *ngIf="show">ngIfを利用</div>
  <div [style.display]="show ? 'block' : 'none'">スタイルプロパティを利用</div>
  <input type="button" (click)="onClickChange()" value="切り替え">
</div>

切り替えボタンを押下すると、showプロパティの値が切り替わり表示と非表示が切り替えられる簡単なコードなります。

実証

実際に切り替えを行い、ディベロッパーツールで確認すると添付画像のようになります。 ngIfでは要素そのものが破棄される、スタイルバインディングでは要素は残り、スタイルが適用され隠れている状態ということがわかります。 ページ上の要素は、表示/非表示に関わらずデータバインディングに関わる変更監視等を続けるので、余計なリソースを消費することに繋がる為ngIfでは、文書ツリーから破棄する動きをとっているようです。

結論

・基本はngIfでの表示切り替え。
・初期化に高いオーバーヘッドを要する処理かつ頻繁に切り替えるような箇所の場合は、スタイルバインディングを利用。

以前少しだけ触ったVueでもv-showとv-ifの表示の違いがあったような。。。 フロントエンドについてはまだまだ初心者ですの誤った認識などありましたらご教授ください。