Angularで表示/非表示に関するあれやこれやそれや

##　はじめに

「これが『ngIfディレクティブ』で非表示にした要素」
「スタイルバインディング『hidden』で非表示にした要素」
「スタイルバインディング『style.display』で非表示にした要素」
「全部同じじゃないですか！？」
「ちがいますよーーっ」
「これだからしろうとはダメだ！」「もっとよく見ろ！」
「『ngIf』と『hidden』のちがいは、ngIfは要素が生成されないんだ」
「『hidden』は要素にhidden属性が加わる」
「『style.display』はスタイル指定だからinlineやblockを指定できる」

.
.
.

Angularにはテンプレートの表示、非表示を制御する方法がいくつかあります。
今回は、それぞれどのような特徴があるのかを見ながらAngularしろうとから1歩前に踏み出してみましょう。

ngIf

ngIfが真の場合HTML要素を生成し、逆の場合は生成しません。不要な情報を生成しない為、リソースが軽く済みます。ngIfを変更する度に要素が再生成される為、頻繁に切り替える処理には向きません。

また、要素が生成されない為、コンポーネントを通して要素を参照することが出来ない点には注意が必要です。

実装コード

<div *ngIf="show" class="content-block">
　　ngIf
</div>

↓

表示中の要素

<!--bindings={
  "ng-reflect-ng-if": "false"
}-->
<div _ngcontent-c0="" class="content-block">
  ngIf
</div>

非表示の要素

<!--bindings={
  "ng-reflect-ng-if": "true"
}-->

ngIfはng-templateを使って真偽の切り替えも可能です。ngIfだけでなくngSwitchでも同じことができます。

thenブロックとelseブロック

<div *ngIf="show; then thenBlock; else elseBlock" class="content-block">
  ここの内容は表示されない
</div>
<ng-template #thenBlock>真の場合</ng-template>
<ng-template #elseBlock>偽の場合</ng-template>

hidden

hidden属性を追加して非表示の制御を行っています。ngIfとは異なり、非表示の状態でもコンポーネントから参照することができます。
hidden属性の特性上、CSSでdisplayプロパティに変更が割り当てられている場合は、CSSの表現が優先されてしまうので注意が必要です。

実装コード

<div [hidden]="hidden" class="content-block">
  hidden
</div>

↓

表示中の要素

<div _ngcontent-c0="" class="content-block">
  hidden
</div>

非表示中の要素

<div _ngcontent-c0="" class="content-block" hidden="">
  hidden
</div>

style.display

CSSのdisplayプロパティを指定して非表示制御を行っています。もちろん非表示にするには"none"を指定する必要があります。
また、hiddenと同様にCSSで割り当てている場合は注意です。

実装コード

<div [style.display]="displayProperty" class="content-block">
  styleDisplay
</div>

↓

表示中の要素

<div _ngcontent-c0="" class="content-block" style="display: block;">
  styleDisplay
</div>

非表示中の要素

<div _ngcontent-c0="" class="content-block" style="display: none;">
  styleDisplay
</div>

ケース

以下の様な基準で使い分けをしています。

表示、非表示の切り替えが不要な場合
→ ngIf

表示、非表示を繰り返す場合
→ hidden、style.display

非表示状態の要素を参照、変更する場合
→ hidden、style.display

切り替え時に要素の初期化をしたくない場合
→ hidden、style.display

※ hidden属性は関連性が無いことを示す属性ですので、上記のケースが使い方として相応しくない場合があります。

##　参考

https://angular.io/api/common/NgIf
https://angular.io/guide/ajs-quick-reference
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/hidden