Upload
nir-kaufman
View
287
Download
0
Embed Size (px)
Citation preview
MASTERING ANGULAR PIPES
Nir Kaufman
Nir KaufmanHead of Angular Development @ 500Tech
- AngularJS evangelist - International speaker - Guitar player
PART 1 WHAT ARE PIPES?
Reusabledisplay-value transformations
Take in input data and transform it to a desired output
Used in templates
@Component({ template: ` <h1>{{ title | uppercase }}</h1> `, }) export class Examples { private title:string; constructor() { this.title = "Pipes Examples"; } }
PART 2 BUILT-IN PIPES
Angular ships with some core pipes
@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 ) }) } }
Pipes can accept arguments
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(); } }
Pipes can be chained
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(); } }
PART 3 CUSTOM PIPES
Pipe is a Class that implements the PipeTransforminterface
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; } }
We use the Pipe decorator to declare its name
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; } }
To use the pipe we must declare it
@Component({ selector: 'examples', pipes: [ Capitalize ], template: ` <h1>{{ firstName | capitalize }}</h1> `, })
Besides the value we can accept any number of arguments
@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; } }
@Component({ selector: 'examples', pipes: [ TruncatePipe ], template: ` <h1>{{ firstName | truncate : 4 : '___' }}</h1> `, })
Pipes are pure by default. The pipe executes only if the value has changed
@Pipe({ name: 'capitalize', pure: true })
Impure pipes run each time change detection occurs
PART 4 HANDS ON!
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
GET INSPIRED- https://github.com/a8m/angular-filter - https://github.com/jprichardson/string.js - https://github.com/dleitee/strman
WHO WILL BE THE PIPE MASTER?
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/