Ionic 2 : Progressbar inside Loading Component - InnerHTML sanitize issue

Question

I've been trying to add a progress indicator inside a LoadingComponent (to inform the user about data downloading progress during application startup).

Exemple code :

this.loading = this.loadingController.create({
    content: "<progressbar [max]="100" [value]="100" [type]="info></progressbar>"
});
this.loading.present();

The issue is that Angular 2 sanitizer remove the progressbar tag because (I suppose) the Loading content is injected inside an [innerHTML].

Since the "content" field only accepts a string, I can't bypass Angular 2 sanitizer (with DomSanitizer.bypassSecurityTrustHtml).

The issue occurs both with the base HTML5 progress and the ng2-boostrap progressbar elements.

Does anyone knows a workaround for this ? Have I missed something ? Or is it a real issue that should be directly fixed in Ionic ?

Answer 1

You were very near...

You can type-assert any of the elements to any to "turn off" type checking.

See the code's comment.

Try with following :

export class HomePage {
  private _htmlProperty: string = '<progress></progress>';

  constructor(public nav: NavController,
              public loadingCtrl: LoadingController,
              private _sanitizer: DomSanitizer) {    
  }

  public htmlProperty() {
       return this._sanitizer.bypassSecurityTrustHtml(this._htmlProperty);
  }

   presentLoading() {
    var html = <any> this.htmlProperty(); // this is the magic
    let loader = this.loadingCtrl.create({
      content: html 
    });
    loader.present();
  }
}

Took help from

Is there a way to ignore type incompatibility in typescript?