Pipe

Pipe는 보이는 값(view)에만 영향을 미칩니다.

당연히 template에 로직이 있는게 정석이죠.

 

예제) username을 대문자로 나타내시오.

 

username = 'kim' 일 경우, 템플릿에 {{username}}이라고 합니다.

pipe는 {{username | uppercase}} 로,  '|' 뒤에 붙여서 output만 변경 시킵니다.

 

pipe 연산 순서

보통 왼쪽에서 오른쪽으로 -> 연산하게 됩니다.

{{server.start | date:'fullDate' | uppercase }} // Mon Aug 09 1920 00:00:00 GMT+0900 (한국 표준시)

{{server.start | date:'fullDate' | uppercase }} // 에러가 발생합니다. Object를 uppercase할 수 없기 때문

API : https://angular.io/api?query=pipe

---

커스텀 pipe 만들기

 

10글자 이상일 경우 뒤에 ... 붙여서 보여주기.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'shorten'
})
export class ShortenPipe implements PipeTransform {
  transform(value: any) {
    if (value.length > 10) {
      return value.substr(0, 10) + '...';
    }
    return value;
  }
}

 

Pipe데코레이터를 선언합니다.

impements PipeTransform 인만큼 transform매쏘드가 필요합니다. (1개 이상의 파라미터를 요구합니다.)

반드시 return값이 있어야 겠져?

 

app.moule.ts에서 declarations에 'ShortenPipe'를(class name) 추가해 줍니다

 

{{servername | shorten}} // name을 적어주면 됩니다.

---

pipe로 array 필터링 하기

 

input(필터)에 속성 값을 입력한 것이 나오도록 하는 필터 입니다.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(value: any, filterString: string, propName: string): any {
    if ( value.length === 0 || filterString === '') {
      return value;
    }
    const resultArray = [];
    for (const item of value) {
      if (item[propName] === filterString) {
        resultArray.push(item);
      }
    }
    return resultArray;
  }
}

필터 값이 비어있다면, 필터링 되지 않은 전체를 보여줍니다.

여기서는 서버의 상태(status)를 필터 합니다

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <input type="text" [(ngModel)]="filterStatus">
      <hr>
      <ul class="list-group">
        <li
          class="list-group-item"
          *ngFor="let server of servers | filter:filterStatus:'status'"
          [ngClass]="getStatusClasses(server)">
          <span
            class="badge">
            {{ server.status }}
          </span>
          <strong>{{ server.name }}</strong> | {{ server.instanceType }} | {{ server.started }}
        </li>
      </ul>
    </div>
  </div>
</div>

2-way-bind할 수 있도록 [(ngModel)]을 씁니다. 당연히 ts.file에 filterStatus라는 변수가 선언되어야 겠죠?

 

*ngFor뒤쪽에 pipe를 추가합니다 (filter)

*ngFor="let server of servers | filter:filterStatus:'status'"

filter (pipeName)

:filterStatus (첫번째 파이프의 파라미터) // 여기에선 사용자가 입력한 값 입니다.

:'status' 대상값이 됩니다. 

아래와 같은 Object에서 name에 해당하는 status를 대상으로 예제를 진행 합니다.

 

{
  instanceType: 'medium',
  name: 'Production Server',
  status: 'stable',
  started: new Date(15, 1, 2017)
},

위와 같은 실행 결과가 나오게 됩니다.

 

---

@Pipe({
  name: 'filter',

  pure : false // 페이지의 값이 변경될 때마다 계산을 합니다. (매우 퍼포먼스가 좋지 않기 때문에 사용에 주의하시기 바랍니다.)
})

 

async와 같은 경우, 데이터가 변할 지라도, pure:false가 적용되지 않습니다. 그럴땐.

{{appStatus | async}}

server request와 같은 async 자료는 아래와 같이 표기를 해주면 됩니다.