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:
npm i @ng-web-apis/common
Now install the package:
npm i @ng-web-apis/mutation-observer
MutationObserverModule and then use
to watch mutation in an element.
Alternatively use an
MutationObserverService manually to
MutationObserver in an RxJS
Use attributes on an element to define
config object. All attributes are
no need to explicitly set them to
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
<div subtree childList characterData attributeFilter="title, aria-label" [title]="title" [attr.aria-label]="label" (waMutationObserver)="onMutation($event)" > ... </div>
If you want to use this package with SSR, you need to mock
MutationObserver class on the server.
You can use our Universal package for this, see this example.
You can try online demo here
Do you also want to open-source something, but hate the collateral work? Check out this Angular Open-source Library Starter we’ve created for our projects. It got you covered on continuous integration, pre-commit checks, linting, versioning + changelog, code coverage and all that jazz.