Thuta Learning
IntermediateWeb Developmentintermediate

Custom Pipes

Relax. We'll talk through this in plain words — no textbook voice.

You can create custom pipes for your application's specific requirements.

typescript
// reverse.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

// exponential.pipe.ts
@Pipe({
  name: 'exponential'
})
export class ExponentialPipe implements PipeTransform {
  transform(value: number, exponent: number = 1): number {
    return Math.pow(value, exponent);
  }
}

// Usage in template
<p>{{ 'Angular' | reverse }}</p>              <!-- ralugnA -->
<p>{{ 2 | exponential:3 }}</p>                <!-- 8 (2^3) -->
<p>{{ 5 | exponential:2 }}</p>                <!-- 25 (5^2) -->

// Don't forget to declare pipes in module
@NgModule({
  declarations: [ReversePipe, ExponentialPipe]
})
You should see
(The custom pipes work and transform the data)
Custom Pipes | Thuta Learning