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)