【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の属性のみ切り替わります。