angular: ResizeObserver not work with innerHTML set from getter

186 Views Asked by At

demo link: https://codesandbox.io/s/lively-thunder-bi5q4?file=/src/app/app.component.ts

I'm trying to use ResizeObserver to observe element set by [innerHtml] binding

when I put the HTML string in the component class property, the Resize observer works

// the component
class App {
  // ...
  _title = `<div id="oo">oo</div>`;
  title = this.domSanitizer.bypassSecurityTrustHtml(this._title);
}
// the template
<div [innerHtml]="title"></div>

but when I put the HTML string in the component class getter, the Resize observer won't work

// the component
class App {
  // ...
  get title() {
    return this.domSanitizer.bypassSecurityTrustHtml(this._title);
  }
  _title = `<div id="oo">oo</div>`;
}

// the template
<div [innerHtml]="title"></div>
0

There are 0 best solutions below