From Filters To Pipes
Angular CLI Pipe Scaffolding
ng g pipe derpy-derp
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'derpyDerp' }) export class DerpyDerpPipe implements PipeTransform { transform(value: any, args?: any): any { return null; } }
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'derpyDerp' }) export class DerpyDerpPipe implements PipeTransform { transform(value: any, args?: any): any { return 42; } }
Using A Pipe In Your Template
<div> {{ points | derpyDerp }} <div>
<div> {{ points | derpyDerp: arg1:arg2:arg3... }} <div>
transform(value:any, arg1:any, arg2:any, arg3:any):any
Using Your Pipe In The TypeScript
Although you will often see pipes being used in the HTML with the pipe symbol, you can also make use of your pipes directly from the TypeScript code. Since our pipe is just a TypeScript class we can treat it like a regular old class. That means if we want to use our pipe to transform some data all we need to do is instantiate the pipe and call it's trandform method! Wow!
new DerpyDerpPipe().transform(myData, arg1, arg2, arg3)
|