Angular2 Directive: How to detect DOM changes
I want to implement Skrollr as an Angular2 attribute directive.
So, the format may be:
<body my-skrollr>
</body>
However, in order to implement this, I need to be able to detect changes in the DOM in child elements below the containing tag (in this case, <body>), so that I can call skrollr.init().refresh(); and update the library to work with the new content.
Is there a straightforward way of doing this that I'm not aware of, or am I approaching this incorrectly?
Answer
Angular does not provide something built-in for that purpose. You can use MutationObserver to detect DOM changes.
@Directive({
selector: '[my-skrollr]',
...
})
class MyComponent {
constructor(private elRef:ElementRef) {}
ngAfterViewInit() {
this.observer = new MutationObserver(mutations => {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
var config = { attributes: true, childList: true, characterData: true };
this.observer.observe(this.elRef.nativeElement, config);
}
}