Angular 2 pipes with variable parameter

Question

I am in the process of learning Angular2 / Ionic2, so please excuse my ignorance. I got to learning Pipes and it all seemed easy until I came across this problem. Let me demonstrate the problem using a perfect example with temperatures.

Say I have a pipe returning a Celisus or Fahrenheit temperature value, depending on the setting stored on localStorage (Celsius default value).

So, I created a tube that does this:

export class TemperatureConverterPipe implements PipeTransform {

  // Selected temperature unit
  private unit: string;

  constructor(private settings: Settings){
    // Get immediately the temperature unit from localStorage
    // And subscribe to changes
    this.settings.radio().subscribe(data => {
      this.unit = data.temp_unit
    });
  }

  // Return temperature
  transform(value: number): number {
    switch(this.unit){
      case "c":
        return value;
        break;
      case "f":
        return celsiusToFahrenheit(value);
        break;
      default:
       return value;
    }
  }

  // Convert celsius temp to fahrenheit
  celsiusToFahrenheit(value: number){
     return value * 9/5 + 32;
  }

}

Problems I'm stuck for:

• How can this pipe monitor a parameter change (temperature unit) and return new values ​​(from eq to C)? Because at the moment he is only monitoring changes in input (temperature).
• Is this the right way to solve this problem?

!

Answer 1

:

 @Pipe(name: 'tempConverter')
 export class TemperatureConverterPipe implements PipeTransform {

      // Selected temperature unit
      //private unit: string;

      constructor(){

      }

      // Return temperature
      transform(value: number,unit:string): number {
        switch(unit){
          case "c":
            return value;
            break;
          case "f":
            return celsiusToFahrenheit(value);
            break;
          default:
           return value;
        }
      }

      // Convert celsius temp to fahrenheit
      celsiusToFahrenheit(value: number){
         return value * 9/5 + 32;
      }

    }

HTML-:

[temperatureProperty]="value | tempConverter:unit"

ngOninit .

Answer 2

@Pipe(name: 'tempConvert', pure: false)
export class TemperatureConverterPipe ...

, , . , , .