【AngularJS】大文字・小文字の相互変換

AngularJSにおけるlowercase、uppercaseパイプで大文字・小文字へ相互変換する方法をまとめました。

## 【パイプ】大文字・小文字の相互変換

lowercase、uppercaseパイプを使えば、大文字・小文字の相互変換ができます。

■app/app.component.ts

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

// コンポーネントの構成情報を定義するデコレータ
@Component({
  // コンポーネントの適用先を表すセレクター式
  selector: 'app-root',

  // コンポーネントに適用するスタイルシート
  styleUrls: ['./app.component.css'],

  // コンポーネントに適用するテンプレート(外部ファイルから読み込み)
  templateUrl: './app.component.html',
})

export class AppComponent {
  sarvant = 'Artoria';
}

■app/app.component.html

<!-- 小文字に変換 -->
<p>{{ sarvant | lowercase }}</p>

<!-- 大文字に変換 -->
<p>{{ sarvant | uppercase }}</p>