How to re render or refresh html section in angular when async pipe gets updated?

Question

I have an async pipe, it's connected with a provider to make a translation request to aws translate, then returns a promise. I have an "about" page, in this page it's showed up the option to select language between English and Spanish I store the value in storage and then I push it to an event to tell translation provider to update "language" variable, that way in the async pipe if language is "es" for spanish it will make the request to aws translate, else it will return the default value;

The problem is how can I re render in this case "about" page when the language changed, since it's not a component value change, how can I re render just the page so the pipe can translate the "about" html text?

The pipe works perfectly, just don't know how to reload it when user change language at that exact moment.

about page section I need to translate

        <ion-row>
          <ion-item>
              <strong>{{'Account:' | translate | async}}</strong> {{account.displayName}} <br>
              <strong>{{'User:' | translate | async}}</strong> {{user.first_name}} {{user.last_name}} <br>
              <strong>{{'Email:' | translate | async}}</strong> {{user.email}} <br>
              <strong>{{'App Version:' | translate | async}}</strong> {{version}} <br>
          </ion-item>
          <ion-item>
            <ion-label><strong>{{'Language' | translate | async}}</strong></ion-label>
            <ion-select [(ngModel)]="language" (ngModelChange)="selectLanguage($event)">
              <ion-option value="en">English / Inglés</ion-option>
              <ion-option value="es">Spanish / Español</ion-option>
            </ion-select>
          </ion-item>
        </ion-row>

SelectLanguage method

  selectLanguage(lan){
    this.storage.set('lan', lan).then(lan => {
      this.events.publish('lan:changed', lan);
    });
    console.log("selectLanguage(): "+lan);
  }

I thought and tried NgZone but what will I run in the callback?

EDIT:

translate.pipe.ts

@Pipe({
  name: 'translate'
})
export class TranslatePipe implements PipeTransform {
  public language: any;
  constructor(public translate: TranslateProvider, public events: Events){
    this.translate.getLanguageOption();
  }
  async transform(value: string, ...args) {
    const params = {
      Text: value,
      SourceLanguageCode: "en",
      TargetLanguageCode: "es"
    };
      if(this.translate.language === "es"){
          let actionPromise = this.translate.translator.translateText(params).promise();
          return actionPromise.then((data) => {
            console.log()
            return (data.TranslatedText);
          }).catch((err) => {
            console.log(err);
          });
      } else {
        return value;
      }
    }

}

Answer 1

I think you need an impure pipe for that.

@Pipe({
  name: 'flyingHeroesImpure',
  pure: false
})