@ng-web-apis/mutation-observer
Advanced tools
A library for declarative use of Mutation Observer API with Angular
Mutation Observer API for AngularPart 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
Add MutationObserverModule and then use (waMutationObserver)="onMutation($event)" directive to watch mutation in an
element.
Alternatively use an Observable-based MutationObserverService manually to get MutationObserver in an RxJS
Observable 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
attributeFilterarray.
<div
subtree
childList
characterData
attributeFilter="title, aria-label"
[title]="title"
[attr.aria-label]="label"
(waMutationObserver)="onMutation($event)"
>
...
</div>
 |  |  |  |
|---|---|---|---|
| 11+ | 14+ | 26+ | 7+ |
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
Other Web APIs for Angular by @ng-web-apis
FAQs
A library for declarative use of Mutation Observer API with Angular
The npm package @ng-web-apis/mutation-observer receives a total of 6,633 weekly downloads. As such, @ng-web-apis/mutation-observer popularity was classified as popular.
We found that @ng-web-apis/mutation-observer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.