Angular Pipe

AngularJS에는 60여개의 built-in Pipe가 있었으나 Angular는 9개의 built-in pipe를 지원한다. 나머지 기능은 pipe를 직접 구현하여 사용할 수 있다.

pipe	meaning
date	날짜 형식 변환
json	JSON 형식 변환
uppercase	대문자 변환
lowercase	소문자 변환
currency	통화 형식 변환
percent	퍼센트 형식 변환
decimal	자리수 형식 변환
slice	문자열 추출
async	비동기 객체 출력

new Date() 등으로 생성한 객체에 pipe를 사용하면 깔끔한 형식으로 출력할 수 있다.

객체 배열 형식으로 된 data를 확인하며 코딩할 때 <pre>{ data | json }</pre>로 data를 확인할 수 있다.

Category가 있는 경우 category 별로 filtering해서 데이터를 보여줄 수도 있다.

// filter.pipe.ts

@Pipe({
  name: 'filter',
})
export class FilterPipe implements PipeTransform {
  transform(todos: Todo[], active: NavItem): any {
    if (active === 'All') return todos;
    return active === 'Active'
      ? todos.filter(todo => !todo.completed)
      : todos.filter(todo => todo.completed);
  }
}

<!-- todos.component.html -->
<li *ngFor="let todo of (todos | filter: navState)">
  ....
</li>

Angular는 template을 렌더링할 때 사용하는 data의 Reference value가 바뀌어야 상태 감지를 해서 재렌더링을 하며 pipe를 실행한다. 따라서 상태가 변경될 때는 명시적으로 재할당을 해주는 게 좋다. 재할당을 하지 않고 일부분만을 변경할 경우 pipe에 option을 주어야 한다.

@ Pipe({
  name: 'filter',
  pure: false
})

pure: false option을 주면 Reference value가 바뀌지 않더라도 상태를 감지하지만 퍼포먼스가 안 좋아진다. 재할당을 하자.