Angular Pipes Workshop

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/