MSSE SENG 5199

Course Materials for the MSSE Web Application Development Course

Angular Pipes

Adam Keyser


Pipes


Example Built-in Pipes:


Examples

let person.firstName = 'fred';

 -> 'FRED'


Using a Pipe

<td class="text-right"></td>
<td class="date"></td>
<td class="date"></td>

Date Pipe


JSON Filter

<div></div>

Parameters


Chaining Pipes


Filtering Collections

<tr ng-repeat="p in products | slice:0:20">

Creating Your Own Pipe


#Custom Pipe Example

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

@Pipe({
  name: 'labelCase'
})
export class LabelCasePipe implements PipeTransform {

  transform(firstName: string, lastName?: string): string {
    return LabelCasePipe.nameFormat(firstName)  +  (lastName ? ", " + LabelCasePipe.nameFormat(lastName) : "");
  }

  static nameFormat(value: string) : string {
    let upper = value.toUpperCase();
    let lower = value.toLowerCase();
    return upper[0] + lower.substr(1);
  }
}


#Pipe change detection


#Pure vs impure Pipes


#Impure Pipes

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

#Async Pipes


#Testing pipes

it('transforms "abc" to "Abc"', () => {
    let pipe = new LabelCasePipe();
    expect(pipe.transform('NAME')).toBe('Name');
  });

Summary