feat(observers): allow for mutation observer options to be customized in content observer

[crisbeto]

Currently we always use the same set of MutationObserver options to monitor an element, however if the consumer knows what they want to monitor, they could gain a performance benefit from configuring the observer differently. These changes rework the ContentObserver to allow it to handle multiple observers per element that are cached based on their options.

[jelbourn]

I worry this makes the cdkContentObserver too broad- it was intended to provide an easy/foolproof way of knowing when the content of an element changed.

What do you think about making a separate cdkMutationObserver that exposes all of the knobs for the underlying MutationObserver for people that want more fine-grained control?

[crisbeto]

The default consumption is as simple as before, the only difference is that people who know what they're doing can pass in some extra options. My concern is that if added another API, we'd have pretty much the same logic, but with the ability to pass in a settings object.

[jelbourn]

Coming back to this PR- was this requested somewhere? My main thought now is wanting to avoid the extra code if nobody has really asked for it.

[crisbeto]

It wasn't requested anywhere, but it's something I noticed when fixing issues that involved cdkObserveContent directive. For most of the cases, we're using the MutationObserver only to look for text changes, however we end up observing a bit more. There's also the attributes option which could be useful in some cases, but we don't expose to the user.

[ngbot[bot]]

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges. Please help to unblock it by resolving these conflicts. Thanks!

[ngbot[bot]]

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges. Please help to unblock it by resolving these conflicts. Thanks!

[ngbot[bot]]

Hi @crisbeto! This PR has merge conflicts due to recent upstream merges. Please help to unblock it by resolving these conflicts. Thanks!

[johanchouquet]

Hi there, my understanding is that we would be able to observe if a specifig img tag for example would be loaded. If that's the case, I do feel like we developers have a true need of this, as I can read quite a lot of things about lazy loading images. And this is just 1 use case.

[natsch93]

Any update on this, please? I would also like this since the content observer is unable to detect img src changes with the current configuration. Thank you.

[crisbeto]

@jelbourn should we revisit this now that we've had a few requests for it?

[jelbourn]

@crisbeto let's discuss in the next team meeting. I'm still of the opinion that, if we want to broaden the scope of this directive, at the very least the name needs to change.

[jelbourn]

We talked about this at our team meeting. Resolution:

• Rename ContentObserver -> MutationObserverRegistry
• Refactor CdkObserveContent -> CdkObserveMutations with full options
• cdkObserveContent remains for textContent only

[mcalmus]

Any chance we can get this in v10? I'd really like to use it to swap out images based upon some attributes.

[JWess]

I was hoping to use this to observe an HTML attribute, but alas, I guess I'll be using native MutationObserver instead... 😞