【Angular17】@if構文で条件分岐しよう！

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

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

Angularの解説シリーズです。

今回はAngular17の新しいif文の書き方について学んでいきましょう！

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

この記事を読むと・・・

Angular17の@if構文の書き方が理解できる！

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

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

作りたいもの
1. 実行環境
Angular17で追加された@if構文を使いこなそう！
1. @if構文の書き方
実際に作ってみよう！
GitHubのサンプルコード
まとめ

作りたいもの

これが今回の完成形だよ！

実行環境

Angularのバージョンが古いと動かないことがあるよ！
うまく動かなければ下の記事を参考にアップデートしてね！

【Angular17対応】AngularCLIをアップデートしよう！

Angular17で追加された@if構文を使いこなそう！

Angular17では*ngIfのかわりに@ifという構文が追加されました。

*ngIfでは条件を満たした場合にコンポーネントを表示
条件を満たさない場合にコンポーネントを非表示

という条件分岐しか出来なかったのですが、
ついにelse / else if 条件での表示切替ができるようになりました。

今回はこの条件分岐方法について解説します。

Angularユーザとしてとても嬉しいアップデートだね！

@if構文の書き方

@if(条件式１){
    条件式１がtrueの際に表示
}@else if (条件式２) {
    条件式１がfalse、条件式２がtrueの際に表示
}@else {
    条件式１，２が双方falseの際に表示
}

このようにとても直感的に記述できるよ！

実際に作ってみよう！

カウンターを設置し、以下のように表示切り替えする処理を作ります。

0の際の表示
奇数の際の表示
偶数の際の表示

偶数の際の表示はelse文に記述するよ！

新規アプリの作成

ターミナルを開いて以下のコマンドを実行してください。

ng new my-app
cd my-app
ng serve -o

ng newした際のルーティング設定はどっちでもいいよ！
スタイルの設定はなんでもいいけど、本ブログでは一括してSCSSで記述するよ！

補足

ng new my-app   →   新規Angularアプリの作成
cd my-app       →   ディレクトリ移動
ng serve -o     →   作成したAngularアプリの起動

app.component.html

<div>
  カウンター: {{ counter }}
  <button (click)="countUp()">+</button>
  <button (click)="countDown()">-</button>
</div>

<div>
  @if(counter === 0){
  <p>0です</p>
  }@else if (counter % 2 === 1) {
  <p>奇数です</p>
  }@else {
  <p>偶数です</p>
  }

  <p *ngIf="counter === 5">5です！！</p>
</div>

*ngIfが併用できることを確認するためのコードもあるよ！

app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  // カウンター変数を宣言し、0で初期化
  counter: number = 0;

  // カウントを増やすメソッド
  countUp() {
    this.counter++;
  }

  // カウントを減らすメソッド
  countDown() {
    this.counter--;
  }
}

画面を確認しよう！

全ての条件分岐が正常に動作したよ！

GitHubのサンプルコード

今回作ったものはGitHubにあげているので
うまく動作しなかった方は是非ダウンロードしてみてください。

GitHub - same-hack/angular17_if

Contribute to same-hack/angular17_if development by creating an account on GitHub.

まとめ

Angular17からは@if構文が追加された
else / else if条件も定義できる
*ngIfも併用可能

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

twitter
instagram