Angular でEnum型を初期化してテンプレートで使用する方法

Angular でEnum型を初期化してテンプレートで使用する方法
1. 関連

Angular でEnum型を初期化してテンプレートで使用する方法

Enum型をそのままテンプレートで使用したほうが可読性が良いため、初期化してテンプレートでそのまま使用したりします。

例えば以下です。

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

enum Sample {
  Tokyo = '東京',
  Osaka = '大阪',
  Hukuoka = '福岡'
}

@Component({
  selector: 'app-root',
  template:
  `
  <p>{{place}}</p> <!-- 何を指しているかわかりづらい -->
  `,
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  public place1:Sample = Sample.Tokyo;
}

これは、Enum型の列挙子を変数に格納し、表示した例です。

typeofを使うことにより、Enumを初期化することができます。

変数名: typeof Enum型 = Enum型

これで変数名にEnum型が入ります。以下のように変数を使うことができます。

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

enum Sample {
  Tokyo = '東京',
  Osaka = '大阪',
  Hukuoka = '福岡'
}

@Component({
  selector: 'app-root',
  template:
  `
  <p>{{place.Tokyo}}</p><!-- enum型をそのまま使える -->
  <p>{{place.Osaka}}</p><!-- enum型をそのまま使える -->
  <p>{{place.Hukuoka}}</p><!-- enum型をそのまま使える -->
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public place: typeof Sample = Sample; // typeofキーワードを使用する
}

enum型の宣言は別ファイルにしてimportしてあげるともっとわかりやすくなります。