universal.pipe.ts

@Pipe({
  name: 'map'
})
export class Mapping implements PipeTransform {
  /* 
  this will be a universal pipe for array mappings. You may add more 
  type checkings and runtime checkings to make sure it works correctly everywhere
  */
  transform(value, mappingFunction: Function){
    return mappingFunction(value)
  }
}


@Component({
  selector: 'some-component',
  template: `
    <div>
      <dropdown-component [options]="weightUnits"></dropdown-component>
      <input type="text" placeholder="Price">
      <dropdown-component [options]="(weightUnits | map : slashed)"></dropdown-component>
      <-- This will do the job -->
    </div>
`
})
export class SomeComponent {
  public weightUnits = [{value: 1, label: 'kg'}, {value: 2, label: 'oz'}];
  
  public slashed(units){
    return units.map(unit => {
      return {
        label: '/' + unit.label,
        value: unit.value
      };
    });
  }
  // we will delegate a custom mapping function to a more generic pipe, which will just call it on value change
}