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';
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.
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.
Sign up