watch-dom

Angular $watch for the DOM

Usage no npm install needed!

<script type="module">
  import watchDom from 'https://cdn.skypack.dev/watch-dom';
</script>

README

watch-dom Build Status Coverage Status npm

what?

efficiently watch for changes to a dom element (or its descendents).

why?

angular $watch observes property modifications on the $scope, since in angular the $scope is the source of truth. this is a good pattern for most use cases. however, there are situations where you want modules to be decoupled, and the dom is the fundamental source of truth.

how?

default config

watchDom.$watch(DOMElement, function (newValue, oldValue) {
    ...
});

watch custom properties (like what?)

var props = {
    subtree: true,
    attributeFilter: ['foo', 'bar']
};

watchDom.$watch(DOMElement, function (newValue, oldValue) {
    ...
}, props);

full example

<myDirective>
    <myOtherDirective>
    </myOtherDirective>
</myDirective>
angular
.module('myModule', ['watchDom'])
.directive('myDirective', function (watchDom) {

    return {
        link: function (scope, element) {

            var otherDirective = element.find('myOtherDirective');

            watchDom.$watch(otherDirective, function() {

                // do something

            });

        }
    };
    
});

browser compatibility

ie11+, firefox 28+, chrome 31+, safari 7+, opera 20+, ios 6+, android 4.4+

full list

alternative approaches

read