Ionic innerHTML update

Question

Trying to update a div that lives within a component with innerHTML, value depends on user interaction. The data comes in correct by http but it only updates when I click into the component, not when drawerHTML is updated.

EDIT: I forgot to mention that drawerHTML is set from within a cordova plugin of Google Maps marker click callback. I believe this is the culprit because it might be running in an asynced callback that sets the value, but seems does not call for an update of the element.

marker.addEventListener(GoogleMapsEvent.MARKER_CLICK).subscribe((data) => {
    this._myProvider.getData(marker.getTitle()).subscribe((data) =>{
          this.drawerHTML = this._prepare(data);
          console.log(this.drawerHTML);
    });
});

This is where it's shown:

<content-drawer [options]="drawerOptions">
  <ion-toolbar>
    <ion-buttons start>
      <button ion-button color="light" clear (click)="showDrawer()">
          showDrawer
      </button>
    </ion-buttons>

  </ion-toolbar>
  <ion-content>
    <div [innerHTML]="drawerHTML">

    </div>
    <button ion-button round small (click)="hideDrawer()">Close</button>
  </ion-content>
</content-drawer>

content-drawer setup as a ionic / angular component in a separate file with content-drawer.html as:

<ion-content>
    <ng-content></ng-content>
</ion-content>

and the above code projected from my home into ng-content. Seems I have to make content-drawer update itself manually since data is not updated at runtime? The DOM tree has to be updated?

The content-drawer is based on this implementation.

The [async pipe](https://angular.io/api/common/AsyncPipe) might come in handy in your case :) — Phonolog, Jul 30 '18 at 09:32
Thanks. Just tried it with `[innerHTML]="drawerHTML | async"` but it returns `InvalidPipeArgument for pipe 'AsyncPipe'` — El Dude, Jul 31 '18 at 02:49
Ah yeah, you might have to refactor your code a little: [As you can see in the docs](https://angular.io/api/common/AsyncPipe#input-value) the async pipe expects an Observable or a Promise as input. — Phonolog, Jul 31 '18 at 07:24

score 2 · Accepted Answer · answered Jul 31 '18 at 07:07

Try ChangeDetectorRef.

import { ChangeDetectorRef } from "@angular/core";

Inject and instantiate it

constructor(private changeDetectorRef:ChangeDetectorRef) { }

Write your code like this.

marker.addEventListener(GoogleMapsEvent.MARKER_CLICK).subscribe((data) => {
    this._myProvider.getData(marker.getTitle()).subscribe((data) =>{
          this.drawerHTML = this._prepare(data);
          this.changeDetectorRef.detectChanges();
    });
});

This may solve your problem.Triggering change detection manually in Angular

Ionic innerHTML update

1 Answers1