Pipe Hype

Pipes

@Component({
selector: 'file-detail',
template: `
  <span>Last Modified:</span>
  <p>{{file?.lastModified | date}}</p>

  `
})
class FileDetailComponent { }

Pipes Parameters

@Component({
selector: 'file-detail',
template: `
  <span>Last Modified:</span>
  <p>{{file?.lastModified | date:"MM/dd/yy"}}</p>

`
})
class FileDetailComponent { }

Pipes Parameters

@Component({
selector: 'file-detail',
template: `
  <span>Last Modified:</span>
  <p>{{file?.lastModified | date:"MM/dd/yy"}}</p>
  <input [(ngModel)]="format">
`
})
class FileDetailComponent { }

ReplacePipe

@Component({
...
template: `
  <span>Last Modified:</span>
  <p>{{ expression | replace:pattern:replacement}}</p>
`
})

class FileDetailComponent { }

Plunker

ReplacePipe

@Component({
  template: `
  <span>Made with:</span>
  <p>Hello {{name | replace:pattern:'2.0'}}</p>`})
  class ReplacePipeComponent {
    constructor() {
	  this.name = 'Angular 1.5'
	  this.pattern = new RegExp(/(?:\d*\.)?\d+/g);
	}
  }

JsonPipe

@Component({
selector: 'file-detail',
template: `
  <span>File:</span>
  <p>{{file | json}}</p>
`
})
class FileDetailComponent { }

Custom Pipes

import {Pipe,PipeTransform} from 'angular2/core'
@Pipe({name: 'trim'})
export class TrimPipe implements PipeTransform {
  transform(str:string, [length]) : string {
	if (!str || !length || str.length <= length) {
	  return (str || '');
	}
    let dots = length <= 3 ? '' : '...';
    return str.substr(0, length) + dots;
  }
}
		

Custom Pipes

import {Pipe,PipeTransform} from 'angular2/core'
@Pipe({name: 'trim'})
export class TrimPipe implements PipeTransform {
  transform(str:string, [length]) : string {
    if (!str || !length || str.length <= length) {
      return (str || '');
    }
    let dots = length <= 3 ? '' : '...';
      return str.substr(0, length) + dots;
  }
}
        

Custom Pipes

import {Pipe,PipeTransform} from 'angular2/core'
@Pipe({name: 'trim'})
export class TrimPipe implements PipeTransform {
  transform(str:string, [length]) : string {
    if (!str || !length || str.length <= length) {
      return (str || '');
    }
    let dots = length <= 3 ? '' : '...';
    return str.substr(0, length) + dots;
  }
}
        

Pipes and Change Detection

import {Pipe,
PipeTransform} from 'angular2/core';
@Pipe({name: 'shared'})
export class SharedPipe implements PipeTransform {
  transform(files:File[]) {
  return files.filter(file => file.shared);
}
}
		

Pipes and Change Detection

  <input type=checbox> [(ngModel)]="file.shared"
  {{file.name}}

Pure and Impure Pipes

Pure Pipes

Angular executes a pure pipe only when it detects a pure change to the input value.

class FilesComponent {
constructor(){...}
this.files.push(newFile);
}

Impure Pipes

@Pipe({name: 'shared', pure: false})
export class SharedPipe implements PipeTransform {
transform(files:File[]) {
return files.filter(file => file.shared);
}
}

AsyncPipe

import {Observable} from 'rxjs/Observable';

@Component(...)
class FilesListComponent {

  contacts: Observable<Array<File>>;

  constructor(filesService: FilesService) {
	this.files = filesService.getFiles();
  }
}

AsyncPipe

import {Observable} from 'rxjs/Observable';

@Component(...)
class FilesListComponent {

    contacts: Observable<Array<Contact>>;

    constructor(filesService: FilesService) {
        this.files = filesService.getFiles();
    }
}

AsyncPipe

@Component({
template:
  <ul>
    <li *ngFor="let file of files | async">
	  ...
    </li>
  </ul>
`
})
class FilesListComponent {...}

AsyncPipe

@Component({
template: `
  <ul>
	<li *ngFor="let file of files | async">
	  ...
	</li>
  </ul>
`
})
class FilesListComponent {...}

@Pipe({name:
'fetch'})
export class FetchJsonPipe implements PipeTransform{
  private fetched:any = null;
  constructor(private _http: Http) { }
  transform(url:string):any {
  this.fetched = null;
  this._http.get(url)
    .map( result => result.json() )
    .subscribe( result => this.fetched = result )
  }
  return this.fetched;
 }
}

{{file.name}}

Performance Upgrade

Can we do better?

	{{file.name}}

Useful Resources

• Falcor
• GraphQl