みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。
Angularの解説シリーズです。
今回はAngular17の新しいif文の書き方について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- Angular17の@if構文の書き方が理解できる!
※PCにnpm、nodeがインストールされている前提で記述します。
yarn等をお使いの方は読み替えてください。
環境がない人はcodesansbox等を使ってね!
作りたいもの

これが今回の完成形だよ!
実行環境

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

【Angular17対応】AngularCLIをアップデートしよう!
Angular17で追加された@if構文を使いこなそう!

Angular17では*ngIfのかわりに@ifという構文が追加されました。
- *ngIfでは条件を満たした場合にコンポーネントを表示
- 条件を満たさない場合にコンポーネントを非表示
という条件分岐しか出来なかったのですが、
ついにelse / else if 条件での表示切替ができるようになりました。
今回はこの条件分岐方法について解説します。
Angularユーザとしてとても嬉しいアップデートだね!
@if構文の書き方

@if(条件式1){
条件式1がtrueの際に表示
}@else if (条件式2) {
条件式1がfalse、条件式2がtrueの際に表示
}@else {
条件式1,2が双方falseの際に表示
}
このようにとても直感的に記述できるよ!
実際に作ってみよう!

カウンターを設置し、以下のように表示切り替えする処理を作ります。
- 0の際の表示
- 奇数の際の表示
- 偶数の際の表示
偶数の際の表示はelse文に記述するよ!
新規アプリの作成
ターミナルを開いて以下のコマンドを実行してください。
ng new my-app
cd my-app
ng serve -o
ng newした際のルーティング設定はどっちでもいいよ!
スタイルの設定はなんでもいいけど、本ブログでは一括してSCSSで記述するよ!
スタイルの設定はなんでもいいけど、本ブログでは一括して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フォローしてもらえると嬉しいです🦈