Angular: detect when content html is changed in Component/Directive

Question

I have a directive getting html from a REST endpoint and binding it to a div element via [innerHTML]. After this html is rendered I want to call a function which is globally available to mess with this content.

So what I tried was to create a directive which implements AfterView init and added it to my div element:

<div specialContent [innerHtml]="entry.body">

@Directive({
  selector: '[specialContent]'
})
export class SpecialContentDirective implements AfterViewInit {

  constructor(
    private el: ElementRef
  ) {}

  ngAfterViewInit(): void {
    globalObject.applyTo(
      this.el.nativeElement.querySelectorAll('.target')
    );
  }

}

This kind of works but only if the current component which renders the context is freshly loaded. After reloading the content without unloading the component ngAfterViewInit obviously isn't triggered again.

So what's the correct way to do such thing in Angular?

There is a good answer here: https://stackoverflow.com/a/36130482/4079915 — Experimenter, Feb 04 '22 at 10:20

noririco · Accepted Answer · 2019-10-15T10:23:57.720

1

It is not so clear what you try to achieve with applyTo method.

Why not try to use the directive with an Input ?

in HTML

<div [specialContent]="entry.body">

in directive

@Directive({
  selector: '[specialContent]'
})
export class SpecialContentDirective implements OnChanges {
  @Input('specialContent') myContent: string;
  constructor(
    private el: ElementRef
  ) {}

  ngOnChanges(changes: SimpleChanges){
    if(changes.myContent) {
      this.el.nativeElement.innerHTML = myContent;

      globalObject.applyTo(
       this.el.nativeElement.querySelectorAll('.target')
      );
    }
  }

}

edited Oct 15 '19 at 10:23

answered Oct 15 '19 at 10:12

noririco

765
6
15

This also isn't working since the problem still is, that ngAfterViewInit only get triggered once. – Johni Oct 15 '19 at 10:20

Sam · Answer 2 · 2019-10-15T10:09:16.370

0

Assuming you have a service that is using angular's http client to perform the api call. If not you probably should use this approach.

Call the Api and subscribe to the response, then fire a function once it is completed.

Subscribe has 3 stages, next, error, complete.

this._service.api().subscribe(
    data => {
        this.data = data
    }, error => {
    //handle error
    }, () => {
    //Fire Function to mess with content
    }
)

You could also mess with the data before assigning it to your variable (this is probably the better way of doing it) though not sure exactly what you want to achieve.

edited Oct 15 '19 at 10:09

answered Oct 15 '19 at 10:01

Sam

1,736
8
15

The global function attaches event handlers so it isn't enough to change the html before. With your soulution a can't be sure the html is already rendered at this point. – Johni Oct 15 '19 at 10:12

score 0 · Answer 3 · answered Oct 15 '19 at 10:28

You can use Lifecycle hook to detect changes using a life cycle hook called "ngOnChanges" either in your component or directive. Here is the sample code from official website of angular.

ngOnChanges(changes: SimpleChanges) {
  for (let propName in changes) {
    let chng = changes[propName];
    let cur  = JSON.stringify(chng.currentValue);
    let prev = JSON.stringify(chng.previousValue);
    this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
  }
}

SimpleChanges object here provides you previous and new value.

For further Information, you can read official documentation https://angular.io/guide/lifecycle-hooks

Angular: detect when content html is changed in Component/Directive

3 Answers3