Angular Pipes Workshop
1 like1,516 views
The document provides an overview of Angular pipes, including their purpose as reusable display-value transformations and the core built-in pipes that Angular offers. It explains the implementation of custom pipes, how to chain them, and the importance of pure and impure pipes in change detection. Additionally, it encourages hands-on practice with links to resources and examples for building custom pipes.
![@Component({
selector: 'examples',
pipes: [ Capitalize ],
template: `
<h1>{{ firstName | capitalize }}</h1>
`,
})](https://image.slidesharecdn.com/pipes-160811130822/85/Angular-Pipes-Workshop-25-320.jpg)
![@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;
}
}](https://image.slidesharecdn.com/pipes-160811130822/85/Angular-Pipes-Workshop-27-320.jpg)
![@Component({
selector: 'examples',
pipes: [ TruncatePipe ],
template: `
<h1>{{ firstName | truncate : 4 : '___' }}</h1>
`,
})](https://image.slidesharecdn.com/pipes-160811130822/85/Angular-Pipes-Workshop-28-320.jpg)
Angular Pipes Workshop
- 2. Nir Kaufman Head of Angular Development @ 500Tech - AngularJS evangelist - International speaker - Guitar player
- 6. PART 1 WHAT ARE PIPES?
- 8. Take in input data and transform it to a desired output
- 10. @Component({ template: ` <h1>{{ title | uppercase }}</h1> `, }) export class Examples { private title:string; constructor() { this.title = "Pipes Examples"; } }
- 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 ) }) } }
- 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(); } }
- 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
- 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?