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.