To explain the concept - we’ll build a simple playground with a list of Todo. We’ll implement buttons for adding a new Todo and removing an existing one.

The following image demonstrates our final result:

What is a MutationObserver?

MutationObserver is a Web API that detects a node modifications due to DOM manipulations. Unlike the deprecated MutationEvent, the MutationObserver listens for changes efficiently. Besides, setTimeout hacks aren’t needed anymore!

To better understand MutationObserver, let’s take a look at an example:

This example detects a node through querySelector and creates a MutationObserver instance. The observer takes a function which is applied for each change (for the sake of clarity we’ll log the changes into the console). When we want to bind an observer with a specific node, we shall use the observe method. Nonetheless, an options parameter is passed and indicates which types of DOM changes we want to listen for. In our example, we’re notified of every DOM change.

After registering an observer - we’ve to take care of the subscription. A method that cancels a subscription is called disconnect:

You can check its browser compatibility through this link.

Now, we’re ready to get into our Angular business.

Preparing a Playground

Let’s start with building a simple Angular application, which will consist a Todo list.

First of all, we’ll create a Service that simulates an asynchronous action which takes 1000ms and produces a Todo:

Moreover, we need to create a Component that consists the Todo list, and methods for manipulating the list. Therefore, we’ll attach to our Component couple of methods - addTodo and removeTodo:

As we know, components require an appropriate template. Let’s do it:

So far we haven’t noticed anything unusual - pretty straightforward.

Time has come for us to build a DOM changes listener.

Building a DOM Changes Listener

What we’re going to do now is to make the Directive:

We define two fields: a MutationObserver field for tracking the DOM changes and an EventEmitter field for raising a custom events. If you’re not familiar with EventEmitter - you can read about it here.

As it might be seen, we use ElementRef to access the node element directly. Every DOM change in our node emits a custom event - which passes the change itself as an argument.

Our next step would be to unsubscribe the changes observer when the Directive is destroyed:

Obviously, we have to assign the OnDestroy interface with the Directive:

We’re done with the Directive.

The final step would be to use it in order to track the changes of the list element:

Note: onDomChange is a method which is invoked for each DOM change.

Conclusion

In this article we discovered the MutationObserver Web API. Furthermore, we did a DOM changes simulation and built a Directive that listens for them.

Here’s attached the final application:

You’re invited to explore it through your browser’s console.