Slides for the Angular After Hours meetup group: https://www.meetup.com/Angular-AfterHours/events/232687733/ This session is all about pipes: what they are and how to build our own. By the end of this workshop we will build an open source library of angular pipes! Don't forget to checkout the Angular After Hours repository on github: https://github.com/Angular-AfterHours/pipes

1. MASTERING
ANGULAR
PIPES
Nir Kaufman

2. Nir Kaufman
Head of Angular Development @ 500Tech
- AngularJS evangelist
- International speaker
- Guitar player

6. PART 1
WHAT ARE PIPES?

7. Reusable
display-value
transformations

8. Take in input data
and transform it to a
desired output

9. Used in templates

10. @Component({
template: `
<h1>{{ title | uppercase }}</h1>
`,
})
export class Examples {
private title:string;
constructor() {
this.title = "Pipes Examples";
}
}

11. PART 2
BUILT-IN PIPES

12. Angular ships with
some core pipes

13. @Component({
selector: 'examples',
template: `
<h1>{{ title | uppercase }}</h1>
<h1>{{ object | json }}</h1>
<h1>{{ today | date }}</h1>
<h1>{{ data | async }}</h1>
`,
})
export class Examples {
constructor() {
this.title = "Pipes Examples";
this.object = { id: 1, name: 'nir' };
this.today = new Date();
this.data = new Promise<string>( resolve => {
setTimeout( () => resolve(“data from server"), 3000 )
})
}
}

15. Pipes can accept
arguments

16. import {Component} from "@angular/core";
@Component({
selector: 'examples',
template: `
<h1>{{ today | date:’fullDate' }}</h1>
`,
})
export class Examples {
private today:Date;
constructor() {
this.today = new Date();
}
}

17. Pipes can be chained

18. import {Component} from "@angular/core";
@Component({
selector: 'examples',
template: `
<h1>{{ today | date:'fullDate' | uppercase }}</h1>
`,
})
export class Examples {
private today:Date;
constructor() {
this.today = new Date();
}
}

19. PART 3
CUSTOM PIPES

20. Pipe is a Class that
implements the
PipeTransform
interface

21. import {PipeTransform} from "@angular/core";
export class Capitalize implements PipeTransform {
transform(value:string):string {
let first = value.substr(0, 1).toUpperCase();
let rest = value.substring(1).toLowerCase();
return first + rest;
}
}

22. We use the Pipe
decorator to declare its
name

23. import {Pipe, PipeTransform} from "@angular/core";
@Pipe({
name: 'capitalize'
})
export class Capitalize implements PipeTransform {
transform(value:string):string {
let first = value.substr(0, 1).toUpperCase();
let rest = value.substring(1).toLowerCase();
return first + rest;
}
}

24. To use the pipe we
must declare it

25. @Component({
selector: 'examples',
pipes: [ Capitalize ],
template: `
<h1>{{ firstName | capitalize }}</h1>
`,
})

26. Besides the value we
can accept any number
of arguments

27. @Pipe({
name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
transform(value:string, args:string[]):string {
let limit = args.length > 0 ?
parseInt(args[0], 10) : 10;
let trail = args.length > 1 ?
args[1] : '...';
return value.length > limit ?
value.substring(0, limit) + trail : value;
}
}

28. @Component({
selector: 'examples',
pipes: [ TruncatePipe ],
template: `
<h1>{{ firstName | truncate : 4 : '___' }}</h1>
`,
})

29. Pipes are pure by
default. The pipe
executes only if the
value has changed

30. @Pipe({
name: 'capitalize',
pure: true
})

31. Impure pipes run each
time change detection
occurs

32. PART 4
HANDS ON!

33. HOW IT WORKS?
- Choose a pipe to work on
- Mark it in this work sheet:
http://tinyurl.com/ztjtd25
- Build your pipe on a separate branch
- Create pull request when done

34. GET INSPIRED
- https://github.com/a8m/angular-filter
- https://github.com/jprichardson/string.js
- https://github.com/dleitee/strman

35. WHO WILL
BE THE
PIPE MASTER?

36. THANK YOU!
nir@500tech.com
@nirkaufman
il.linkedin.com/in/nirkaufman
github.com/nirkaufman
ANGULARJS IL
meetup.com/Angular-AfterHours/
meetup.com/AngularJS-IL
Nir Kaufman
meetup.com/frontend-band/