Promise in Pipe transform

Question

I don't want to use "| async pipe" because I don't want to get data for every component. My transform function below:

 transform(key: string, ...args) {
  this.storage.get("dictionary").then((dict) => {         
   var translated = dict[key] || "noResource";
   console.log("key = "+key + ", value = "+translated);
   return translated; 
  });  
}

I can get key and values but value does not rendered. I tried ngZone but not working.

Answer 1

I don't understand why you don't want to use the only "buildin" pipe that matches your case.

says your pipe is :

 @Pipe({name: 'mypipe'})
    export class MyPipe implements PipeTransform
    {
        transform(key: string, ...args) {
            // watch out you missed the return statement !!
            -->return<-- this.storage.get("dictionary").then((dict) => {         
            var translated = dict[key] || "noResource";
            console.log("key = "+key + ", value = "+translated);
            return translated; 
        });  
    }

the in your template you could just use

{{ 'mykey' | mypipe | async }}

If you don't want to use async pipe you will be forced to mimic is logic who is already dead simple and bug proof. No gain for you.