Angular – pipe

pipe

pipe is filter for angular value(bind)
When the value is bound, change value using function or filter etc…
It’s easy to see sample

• String
• Date
• Currency
• Json
• Number
• Plural
• Select
• Slice

String

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

@Component({
  selector: 'app-root',
  template: `
    <p>original : {{title}}</p>
    <p>uppercase : {{title | uppercase}}</p>
    <p>lowercase : {{title | lowercase}}</p>
    <p>titlecase : {{title | titlecase}}</p>
  `
})
export class GeneralPipeComponent {
  title = 'Test Program';
}

First one is change string to Uppercase.
Others are also simple, lowercase, titlecase.

Date

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

@Component({
  selector: 'app-root',
  template: `<ul>
    <li>No format : {{current}}</li>
    <li>Format default : {{current | date}}</li>
    <li>Format medium : {{current | date:'medium'}}</li>
    <li>Format point : {{current | date:'y MM dd (EEE) '}}</li>
  </ul>`
})
export class DateComponent {
  current = new Date();
}

Currency

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

@Component({
  selector: 'app-root',
  template: `<ul>
    <li>Default : {{price | currency}}</li>
    <li>Code : {{price | currency: 'JPY'}}</li>
    <li>Unit (Yen) {{ price | currency: 'JPY'}}</li>
    <li>Unit (Euro) : {{price | currency: 'EUR':true }}</li>
    <li>Fixdigit : {{price | currency: 'JPY': true: '1.0-1'}}</li>
  </ul>`
})
export class CurrencyComponent {
  price = 3500.125;
}

Json

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

@Component({
  selector: 'app-root',
  template: `
    <pre>{{obj | json}}</pre>
  `
})
export class JsonpipeComponent {

  obj: any = {
    name: 'Thunderman',
    gender: undefined,
    birthday: new Date(2000, 11, 12),
    age: 18,
    family: ['Ice', 'Fire'],
    work: function() {},
    other: {
      favorite: 'Game',
      memo: 'Crazy'
    }
  };
}

Number

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


@Component({
  selector: 'app-root',
  template: `<ul>
    <li>Default : {{price | number}}</li>
    <li>Point 2 : {{price | number: '5.0-2'}}</li>
    <li>Integer : {{price | number: '1.0-0'}}</li>
  </ul>`,
})
export class NumberPipeComponent {
  price = 3500.1256;
}

Plural

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

@Component({
  selector: 'app-root',
  template: `<div>
    {{favs.length | i18nPlural:messages}}
  </div>`
})
export class PluralComponent {
  favs = ['Takeshi Goda', 'Suneo Honekawa', 'Hidetoshi Dekisugi'];
  messages = {
    '=0': '[いいね!]されていません。',
    '=1': '1人だけ[いいね!]と言ってくれています。',
    'other': '# 人が[いいね!]と言っています。',
  };
}

Select

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

@Component({
  selector: 'app-root',
  template: `<ul>
    <li *ngFor="let m of members">
      {{m.sex | i18nSelect : messages}} is {{m.name}}.
    </li>
  </ul>`
})
export class SelectPipeComponent {
  members = [
    {name: 'Riko Sakurauchi', sex: 'female'},
    {name: 'Shiro Emiya', sex: 'male'},
    {name: 'Mizuki Nakajima', sex: 'unknown'}
  ];
  messages = {
    'male': 'He',
    'female': 'She',
    'other': 'He/She'
  };
}

Slice

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

@Component({
  selector: 'app-root',
  template: `<ul>
    <li>{{str}}</li>
    <li>{{str | slice: 3}}</li>
    <li>{{str | slice: 3: 5}}</li>
    <li>{{str | slice: 7}}</li>
    <li>{{str | slice: -3}}</li>
    <li>{{str | slice: -3: -2}}</li>
    <li>{{str | slice: -10}}</li>
  </ul>`
})
export class SliceComponent {
  str = 'アイウエオはひ';
}