A library for declarative use of Mutation Observer API with Angular
npm install @ng-web-apis/mutation-observer> Part of >
> Web APIs for Angular





This is a library for declarative use of
Mutation Observer API with Angular.
If you do not have @ng-web-apis/common:
``bash`
npm i @ng-web-apis/common
Now install the package:
`bash`
npm i @ng-web-apis/mutation-observer
Add WaMutationObserver and then use (waMutationObserver)="onMutation($event)" directive to watch mutation in an
element.
Alternatively use an Observable-based WaMutationObserverService manually to get MutationObserver in an RxJSObservable form.
Use attributes on an element to define
MutationObserverInit config object. All
attributes are boolean meaning no need to explicitly set them to true.
> NOTE: Keep in mind these are used one time in constructor so you cannot use binding, only strings. Pass comma
> separated attribute names to set attributeFilter array.
`html
subtree
childList
characterData
attributeFilter="title, aria-label"
[title]="title"
[attr.aria-label]="label"
(waMutationObserver)="onMutation($event)"
>
...
Browser support
|
|
|
|
|
| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| 11+ | 14+ | 26+ | 7+ |
Angular Universal
If you want to use this package with SSR, you need to mock
MutationObserver` class on the server. You can use ourYou can try online demo here
Other Web APIs for Angular by
@ng-web-apis