How to design a pipe that accepts configuration options for flexible transformations

Question

Can i know How to design a pipe that accepts configuration options for flexible transformations?

Answer 1

Angular Pipe Implementation

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({

  name: 'flexTransform'

})

export class FlexTransformPipe implements PipeTransform {

  transform(value: any, config: { [key: string]: any }): any {

    // Apply transformations based on configuration

    let result = value;

    if (config.prefix) {

      result = config.prefix + result;

    }

    if (config.suffix) {

      result = result + config.suffix;

    }

    if (config.uppercase) {

      result = result.toString().toUpperCase();

    }

    if (config.multiply && typeof result === 'number') {

      result = result * config.multiply;

    }

    return result;

  }

}

Usage Examples

<!-- Simple string transformation -->

<p>{{ 'hello' | flexTransform:{prefix: '>> ', suffix: '!', uppercase: true} }}</p>

<!-- Output: ">> HELLO!" -->

<!-- Number transformation -->

<p>{{ 5 | flexTransform:{multiply: 3, prefix: 'Result: '} }}</p>

<!-- Output: "Result: 15" -->

<!-- Chaining with other pipes -->

<p>{{ 2.5 | currency | flexTransform:{prefix: 'Price: '} }}</p>

<!-- Output: "Price: $2.50" -->