【Angular】値がnullやundefinedの際の代替テキストを設定しよう！【1文で出来る処理】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回は値がnullやundefinedの際の代替表示について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansbox等を使ってね！

値がnullやundefinedなどFalthyのときの代替表示を作ろう！

userName: undefined;

<div>{{ userName }}</div>

例えばこのような表示処理があった際には
div内には何も表示されません。

何も表示しないのは画面表示として適さないときがあるので、
この部分に任意のテキストを表示するようにしよう！

{{ 変数 || 代替テキスト }}

これで変数がFalthyの際に代替テキストが表示されるよ！

<div>{{ userName || 'ユーザ名が登録されていません' }}</div>

これでuserNameがFalthyな場合には
「ユーザ名が登録されていません」というテキストが表示されます。

＜div *ngif=”userName”＞{{ userName }}＜/div＞
＜div *ngif=”!userName”＞代替テキスト＜/div＞

のように*ngIfを使って表示切替することもできるよ！

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈