【Angular】ngIf と hidden の個人的な使い分け

概要

Angular で *ngIf と [hidden] の個人的な使い分けを記載します。

基本的には表示・非表示の切り替え頻度が多いものは hidden にしています。
ブラウザの処理速度によっては ngIf だとDOM生成・破棄に時間がかかりレンダリングに影響するケースがあったため、切り替えが多い箇所はhiddenを個人的には推奨しています。
初回判定のみで切り替えがまったくないものについては ngIf を使用しています。

実行環境

• Node.js 10.9.x

使用ライブラリ

• Angular 7.1.x

サンプルソース

ngIf

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

@Component({
  selector: "app-root",
  template: `
    <input type="text" name="memo" required [(ngModel)]="memo" #txtMemo1="ngModel">
    <div *ngIf="txtMemo1.hasError('required')">
        必須入力です
    </div>
  `
})
export class AppComponent {
  memo = '';
}

hidden

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

@Component({
  selector: "app-root",
  template: `
    <input type="text" name="memo" required [(ngModel)]="memo" #txtMemo1="ngModel">
    <div [hidden]="!txtMemo1.hasError('required')">
        必須入力です
    </div>
  `
})
export class AppComponent {
  memo = '';
}

実行結果

ngIf

• ngIf判定時にDOMの生成・破棄が行われているのが分かります。

hidden

• 対象DOMの属性のみ切り替わります。