Tuesday, 18 April, 2017 UTC


It’s easy to create custom pipes to use in your templates to modify interpolated values. You don’t have to duplicate your code if you want to also use a pipe’s functionality in a component class. All you have to do really is inject the pipe like a service, and then call its transform method.
The following works for any Angular 2+ app.
Say we have a custom CapitalizePipe that capitalizes every word that’s longer than 2 characters:
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'capitalize' }) export class CapitalizePipe implements PipeTransform { transform(value: string, args?: any): any { return value.split(' ').map(word => { return word.length > 2 ? word[0].toUpperCase() + word.substr(1) : word; }).join(' '); } }
Now, given that your pipe has been properly added to your module’s declarations, you can inject it in a component’s class like this:
// ... import { CapitalizePipe } from './capitalize.pipe'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [ CapitalizePipe ] }) export class AppComponent { constructor(private capitalize: CapitalizePipe) {} // ... }
And to use it you simple call transfom on the injected instance:
onSubmit(value) { this.data = this.capitalize.transform(value); // ... }
👍 Simple as that! Now you can define logic in custom pipes that can be reused directly in component classes without duplicating code.