Menu
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?
538
“MutationObserver” is a Web API provided by modern browsers for detecting changes in the DOM. By using this API you can listen to changes in DOM, like added or removed nodes, attribute changes or changes in the text content of text nodes and make changes.
Change detection works by detecting common browser events like mouse clicks, HTTP requests, and other types of events, and deciding if the view of each component needs to be updated or not.
The MutationObserver interface provides the ability to watch for changes being made to the DOM tree.
DOM stands for Document Object Model. AngularJS's directives are used to bind application data to the attributes of HTML DOM elements.
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); } } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
