みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!
Angularの解説シリーズです。
今回は条件分岐について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- 条件分岐の作り方が理解できる!
※PCにnpm、nodeがインストールされている前提で記述します。
yarn等をお使いの方は読み替えてください。
環境がない人はcodesansboxを使ってね!
作りたいもの
今回はAngularの条件分岐の記述方法を3つ紹介します。
- *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のときにもコンポーネントが表示されました!
つまり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のときに
異なるコンポーネントが表示されました!
つまりtrueのときとfalseのときに
異なるコンポーネントが表示されました!
まとめ
- *ngIf ・・・表示/非表示の切り替え
- *ngIf ~ else ・・・falseの際にも指定のコンポーネントを表示
- *ngIf ~ then ~ else ・・・true/falseともに表示するコンポーネントを指定
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈