【Angular】条件分岐をしよう！【*ngIf】

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

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

Angularの解説シリーズです。

今回は条件分岐について学んでいきましょう！

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

この記事を読むと・・・

条件分岐の作り方が理解できる！

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

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

作りたいもの

今回はAngularの条件分岐の記述方法を３つ紹介します。

*ngIf
*ngIf ~ else
*ngIf ~ then ~ else

これが今回の完成形だよ！
他のファイルは左上のハンバーガーメニューをクリックして確認してね！

FormModuleのインポート

今回はngModelディレクティブを使用したいので、
ルートのモジュールファイルでFormModuleをインポートします。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MainContentComponent } from './main-content/main-content.component';
import { BtnEventComponent } from './btn-event/btn-event.component';
import { MouseEventComponent } from './mouse-event/mouse-event.component';
import { IfTestComponent } from './if-test/if-test.component';
// フォームコントロール用のモジュール
import { FormsModule } from '@angular/forms';
import { IfElseTestComponent } from './if-else-test/if-else-test.component';
import { IfThenElseTestComponent } from './if-then-else-test/if-then-else-test.component';

@NgModule({
  declarations: [
    AppComponent,
    MainContentComponent,
    BtnEventComponent,
    MouseEventComponent,
    IfTestComponent,
    IfElseTestComponent,
    IfThenElseTestComponent,
  ],
  imports: [
    BrowserModule,
    // フォームコントロール用のモジュール
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

ngModelとは双方向データバインディングを行うためのディレクティブです。
双方向データバインディングとは、
実データと画面上の値を紐付けることです。

簡単にいうと、画面操作するとTypeScriptの値も更新される状態だよ！

【*ngIf】表示非表示を切り替えよう

*ngIfの構文

<div *ngIf="条件式">TRUEの場合のみコンポーネントが表示される</div>

TRUEの場合のみコンポーネントが表示されて、FALSEの場合は何も表示されないよ！

実際に作ってみよう！

if-testコンポーネントを作ろう

ng generate component if-test

if-test.component.ts

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

@Component({
  selector: 'app-if-test',
  templateUrl: './if-test.component.html',
  styleUrls: ['./if-test.component.css'],
})
export class IfTestComponent implements OnInit {
  // 表示フラグ
  showFlg = false;

  constructor() {}

  ngOnInit(): void {}
}

if-test.component.html

<div class="">
  <label>表示切り替え</label>
  <!-- チェックを入れるとshoFlgがtrueになる -->
  <input type="checkbox" [(ngModel)]="showFlg" />
</div>

<div *ngIf="showFlg">trueです</div>

app.component.html

<!-- if-testコンポーネントの埋め込み -->
<app-if-test></app-if-test>

これでチェックボックスがチェックド、つまりtrueのときのみ
コンポーネントが表示されました

【*ngIf else】表示非表示を切り替えよう

*ngIf elseの構文

<div *ngIf="条件式; else false用のコンポーネント名">TRUEの場合に表示</div>

<ng-template #false用のコンポーネント名>FALSEの場合に表示される</ng-template>

条件式の結果によって表示されるコンポーネントが変わるよ！

実際に作ってみよう！

if-testコンポーネントを作ろう

ng generate component if-else-test

if-else-test.component.ts

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

@Component({
  selector: 'app-if-else-test',
  templateUrl: './if-else-test.component.html',
  styleUrls: ['./if-else-test.component.css'],
})
export class IfElseTestComponent implements OnInit {
  // 表示フラグ
  showFlg = false;

  constructor() {}

  ngOnInit(): void {}
}

if-else-test.component.html

<!-- showFlgがtrueの場合に表示、
     falseの場合は#falseComponentを表示する　-->
<div *ngIf="showFlg; else falseComponent">trueです</div>

<ng-template #falseComponent>#falseComponent falseです</ng-template>

app.component.html

<!-- if-else-testコンポーネントの埋め込み -->
<app-if-else-test></app-if-else-test>

これでチェックボックスが未チェック、
つまりfalseのときにもコンポーネントが表示されました！

【*ngIf then else】表示非表示を切り替えよう

*ngIf then elseの構文

<div *ngIf="条件式; then true用コンポーネント名; else false用コンポーネント名">この部分は表示されない</div>

<ng-template #true用コンポーネント名>TRUEの場合に表示される</ng-template>
<ng-template #false用コンポーネント名>FALSE場合に表示される</ng-template>

条件式の結果によって表示されるコンポーネントが変わるよ！
ちなみに条件式を設定した要素は表示されないよ！

実際に作ってみよう！

if-then-else-testコンポーネントを作ろう

ng generate component if-then-else-test

if-then-else-test.component.ts

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

@Component({
  selector: 'app-if-then-else-test',
  templateUrl: './if-then-else-test.component.html',
  styleUrls: ['./if-then-else-test.component.css'],
})
export class IfThenElseTestComponent implements OnInit {
  // 表示フラグ
  showFlg = false;

  constructor() {}

  ngOnInit(): void {}
}

if-then-else-test.component.html

<!-- showFlgがtrueの場合に表示、
     falseの場合は#falseComponentを表示する　-->
<div *ngIf="showFlg; then trueComponent; else falseComponent">
  ちなみにこの部分は表示されない
</div>

<ng-template #trueComponent>#trueComponent trueです</ng-template>
<ng-template #falseComponent>#falseComponent falseです</ng-template>

app.component.html

<!-- if-then-else-testコンポーネントの埋め込み -->
<app-if-then-else-test></app-if-then-else-test>

これでチェックボックスがチェックド、
つまりtrueのときとfalseのときに
異なるコンポーネントが表示されました！

まとめ

*ngIf ・・・表示／非表示の切り替え
*ngIf ~ else ・・・falseの際にも指定のコンポーネントを表示
*ngIf ~ then ~ else ・・・true/falseともに表示するコンポーネントを指定

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

twitter
instagram