Download - Angular Pipes Workshop
![Page 1: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/1.jpg)
MASTERING ANGULAR PIPES
Nir Kaufman
![Page 2: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/2.jpg)
Nir KaufmanHead of Angular Development @ 500Tech
- AngularJS evangelist - International speaker - Guitar player
![Page 3: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/3.jpg)
![Page 4: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/4.jpg)
![Page 5: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/5.jpg)
![Page 6: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/6.jpg)
PART 1 WHAT ARE PIPES?
![Page 7: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/7.jpg)
Reusabledisplay-value transformations
![Page 8: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/8.jpg)
Take in input data and transform it to a desired output
![Page 9: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/9.jpg)
Used in templates
![Page 10: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/10.jpg)
@Component({ template: ` <h1>{{ title | uppercase }}</h1> `, }) export class Examples { private title:string; constructor() { this.title = "Pipes Examples"; } }
![Page 11: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/11.jpg)
PART 2 BUILT-IN PIPES
![Page 12: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/12.jpg)
Angular ships with some core pipes
![Page 13: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/13.jpg)
@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 ) }) } }
![Page 14: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/14.jpg)
![Page 15: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/15.jpg)
Pipes can accept arguments
![Page 16: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/16.jpg)
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(); } }
![Page 17: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/17.jpg)
Pipes can be chained
![Page 18: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/18.jpg)
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(); } }
![Page 19: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/19.jpg)
PART 3 CUSTOM PIPES
![Page 20: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/20.jpg)
Pipe is a Class that implements the PipeTransforminterface
![Page 21: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/21.jpg)
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; } }
![Page 22: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/22.jpg)
We use the Pipe decorator to declare its name
![Page 23: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/23.jpg)
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; } }
![Page 24: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/24.jpg)
To use the pipe we must declare it
![Page 25: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/25.jpg)
@Component({ selector: 'examples', pipes: [ Capitalize ], template: ` <h1>{{ firstName | capitalize }}</h1> `, })
![Page 26: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/26.jpg)
Besides the value we can accept any number of arguments
![Page 27: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/27.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; } }
![Page 28: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/28.jpg)
@Component({ selector: 'examples', pipes: [ TruncatePipe ], template: ` <h1>{{ firstName | truncate : 4 : '___' }}</h1> `, })
![Page 29: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/29.jpg)
Pipes are pure by default. The pipe executes only if the value has changed
![Page 30: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/30.jpg)
@Pipe({ name: 'capitalize', pure: true })
![Page 31: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/31.jpg)
Impure pipes run each time change detection occurs
![Page 32: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/32.jpg)
PART 4 HANDS ON!
![Page 33: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/33.jpg)
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
![Page 34: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/34.jpg)
GET INSPIRED- https://github.com/a8m/angular-filter - https://github.com/jprichardson/string.js - https://github.com/dleitee/strman
![Page 35: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/35.jpg)
WHO WILL BE THE PIPE MASTER?
![Page 36: Angular Pipes Workshop](https://reader031.vdocuments.us/reader031/viewer/2022030304/587776ca1a28ab5b568b6ebd/html5/thumbnails/36.jpg)
THANK [email protected]
@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/