Please enable JavaScript.

Coggle requires JavaScript to display documents.

Angular Pipes - Coggle Diagram

- - - - the order applied is from the left to the right
- - - - @Pipe({ name: 'shorten' }) export class ShortenPipe implements PipeTransform { ... }
        
        transform(value: any) { return value.substr(0, 10); }
      - import { PipeTransform } from '@angular/core'
      - cli: 'ng g p shorten'
    - - declarations: [ ..., ShortenPipe ]
  - - - {{ server.name | shorten:15 }}
        
        pass limit = 15 to pipe
  - - - if ( value.length === 0 || filterString === '' ) { return value; }
      - const resultArray = []; for(const item of value){ if( item[propName] === 'filterString' ){ resultArray.push(item); } return resultArray;}
    - - <input [(ngModel)]="filterStatus"><li *ngFor="let user of users | filter:filterStatus:'status' "
        
        render user with 'status' corresponding filterSatus
- - - - pipe recalculates whenever the value changes. (might have performance issue)