【Angular】*ngForで最初、最後、奇数、偶数の要素判定

はじめに

forループで最初と最後だけ要素判定して処理を変更したいとかよくありますよね。
私も実装している中で、どうやって実装しようとパッと思いつかない時があります。
今回はAngularの*ngForで最初、最後、奇数、偶数の判定をどうするか備忘録もかねてまとめました。
※*ngForを更に知りたい方は参考文献に公式ドキュメントを載せてますのでご確認下さい。

バージョン

• Angular: 9.1.11
  ※バージョンの確認方法ですがng versionで確認できます。

アプリケーションのAngularバージョンを確認するには、プロジェクトディレクトリ内で、
ng versionコマンドを使用します。

参考：あなたのAngularバージョンを確認する

各判定方法

各判定方法で共通して使用するcompoent。

judge.component.ts

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

@Component({
  selector: 'app-judge',
  templateUrl: './judge.component.html'
})
export class JudgeComponent {
  numberArray: number[] = [1, 2, 3, 4, 5];
  constructor() { }
}

最初

judge.component.html

出力結果：
<div *ngFor="let element of numberArray; first as isFirst;">
  <p *ngIf="isFirst">{{ element }}</p>
</div>
<!-- 
  出力結果：
  1
-->

最後

judge.component.html

出力結果：
<div *ngFor="let element of numberArray; last as isLast;">
  <p *ngIf="isLast">{{ element }}</p>
</div>
<!-- 
  出力結果：
  5
-->

奇数

judge.component.html

出力結果：
<div *ngFor="let element of numberArray; even as isEven;">
  <p *ngIf="isEven">{{ element }}</p>
</div>
<!-- 
  出力結果：
  1
  3
  5
-->

偶数

judge.component.html

出力結果：
<div *ngFor="let element of numberArray; odd as isOdd;">
  <p *ngIf="isOdd">{{ element }}</p>
</div>
<!-- 
  出力結果：
  2
  4
-->

注意点

*ngForでループする時、*ngForを記載している開始タグから終了タグまでがループされる。
下記は実際に出力されるHTMLです。

<div *ngFor="let element of numberArray">
  <p>{{ element }}</p>
</div>

<!-- 実際に出力されるHTML -->
<!-- 
  出力結果：
  <div>
    <p>1</p>
  </div>

  <div>
    <p>2</p>
  </div>

  <div>
    <p>3</p>
  </div>

  <div>
    <p>4</p>
  </div>

  <div>
    <p>5</p>
  </div>
-->