Angular基礎　データ変換機能 Pipeの使い方

Typescriptファイル

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
})
export class AppComponent {
  //lowerCaseという変数を宣言し、大文字と小文字の混ざったstringを入れる。
  lowerCase= "Taro YAMADA";
}

HTMLファイル

<h2>Lowercase pipe</h2>
<!-- Typescriptファイルで宣言したlowerCaseという変数をデータとして入れる -->
<div ngNonBindable>User name: {{ lowerCase | lowercase }} </div>
<div>User name: <span>{{ lowerCase | lowercase }} </span></div>

<h2>Uppercase pipe</h2>
<!-- "uppercase"というstringを直接データとして入れる-->
<div ngNonBindable>User name: {{ "uppercase" | uppercase }} </div>
<div>User name: <span>{{ "uppercase"  | uppercase }} </span></div>

HTMLファイル

<h2>Decimal pipe</h2>
<div ngNonBindable>今日の体温は{{ 35.789 | number: '2.1-1' }}です。 </div>
<div>今日の体温は{{ 35.789 | number: '2.1-1' }}です。</div>
<hr>
<div ngNonBindable>今日の体温は{{ 35.789 | number: '2.1-3' }}です。</div>
<div>今日の体温は{{ 35.789 | number: '2.1-3' }}です。</div>

Typescriptファイル

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
})
export class AppComponent {
  //currencyDataという変数を宣言し、数字を入れる。
  currencyData= 6000.12345;
}

HTMLファイル

<h2>Currency pipe</h2>
<!-- データ部分に直接、数字を入れる -->
<div ngNonBindable>今月の売り上げ: {{ 5500.095 | currency }} </div>
<div>今月の売り上げ: <span>{{ 5500.095 | currency }} </span></div>

<!-- Typescriptファイルで宣言したcurrencyDataという変数をデータとして入れる-->
<div ngNonBindable>今月の売り上げ: {{ currencyData| currency: "usd" }} </div>
<div>今月の売り上げ: <span>: {{ currencyData| currency: "usd" }} </span></div>

HTMLファイル

<h2>Currency pipe</h2>
<div ngNonBindable>今月のお小遣い: {{ 5500.095 | currency: "JPY" }} </div>
<div>今月のお小遣い: <span>{{ 5500.095 | currency: 'JPY'}} </span></div>
<hr>
<div ngNonBindable>今月のお小遣い: {{ 5500.095 | currency: 'jpy' }} </div>
<div>今月のお小遣い: <span>{{ 5500.095 | currency: 'jpy' }} </span></div>
<hr>
<div ngNonBindable>今月のお小遣い: {{ 5500.095 | currency: 'jpy': 'symbol': '4.0-0' }}</div>
<div>今月のお小遣い: <span>{{ 5500.095 | currency: 'jpy': 'symbol': '4.0-0' }} </span></div>

Typescriptファイル

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
})
export class AppComponent {
  //todayという変数を宣言し、現在の日時を入れる。
  today= Date.now();
}

HTMLファイル

<h2>Date pipe</h2>
<div ngNonBindable>今日は{{ today | date }} です</div>
<div>今日は{{ today | date }} です</div>
<hr>
<div ngNonBindable>今日は{{ today | date : 'short'}}です</div>
<div>今日は{{ today | date : 'short'}}です</div>
<hr>
<div ngNonBindable>今日は {{ today | date : 'medium'}} です</div>
<div>今日は {{ today | date : 'medium'}} です</div>
<hr>
<div ngNonBindable>今日は{{ today | date : 'long'}}です</div>
<div>今日は{{ today | date : 'long'}}です</div>

Typescriptファイル

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
})
export class AppComponent {
  //percentという変数を宣言し、百分率の数字を入れる。
  percent= 0.987654 
}

HTMLファイル

<h2>Percent pipe</h2>
  <div ngNonBindable>今日の降水確率は{{ 0.123456 | percent }}です。 </div>
  <div>今日の降水確率は{{ 0.123456 | percent }}です。 </div>
  <hr>
  <div ngNonBindable>目標達成率は{{ percent | percent: '2.2-2' }}です。 </div>
  <div>目標達成率は {{ percent | percent: '2.2-2' }}です。</div>

Typescriptファイル

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
})
export class AppComponent {
  //itemsという配列変数を宣言し、要素を入れる。
  items: string[]= ['商品A', '商品B','商品C','商品D']
}

HTMLファイル

<h2>Slice pipe</h2>
    <div>配列の例</div>
    <ul><li *ngFor="let i of items | slice:1:3">{{i}}</li></ul>
    <hr>
    <div>stringの例</div>
    <div>{{ "012345" | slice: 1 : 5 }}</div>

Pipeファイル

//Pipe, PipeTransformを自動的にインポートしてくれる
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'customPipe'
})
export class CustomPipePipe implements PipeTransform {
  //下のtransformのファンクションを自動的に追加してくれる
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

Typescriptファイル

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
})
export class AppComponent {
  // //dataという変数を作り、name/ city/ age情報を入れる
  data = {
    name: "Ken Ito",
    city: "Tokyo",
    age: 27
  }
}

HTMLファイル

<h2>Custom pipe</h2>
<div [innerHTML]= "data.name | customPipe"></div>
<div [innerHTML]= "data.city | customPipe"></div>
<div [innerHTML]= "data.age | customPipe"></div> 

Pipeファイル

//下を自動的にインポートしてくれる
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
  name: 'customPipe'
})
export class CustomPipePipe implements PipeTransform {
  //HTMLファイルで設定したinnerHTMLをバインディングするために
  //DomSanitizerをインポート＆インスタンス化する
  constructor(private domSanitaizer: DomSanitizer) { }
  //下のtransformのファンクションを自動的に追加してくれる
  transform(value: any): any {
    //もしデータの値がTokyoなら
    if (value === 'Tokyo') {
      //背景色をライトグリーンにする
      return this.domSanitaizer.bypassSecurityTrustHtml
      ('<div style="background-color: lightgreen">' + value + '</div>');
    }
    else {
      //それ以外の場合、背景色を黄色にする
      return this.domSanitaizer.bypassSecurityTrustHtml
      ('<div style="background-color: yellow">' + value + '</div>');
    }
  }
}