@ng-web-apis/mutation-observer
v5.1.0TypeScript
A library for declarative use of Mutation Observer API with Angular
0/weekUpdated 3 days agoApache-2.0Unpacked: 39.4 KB
Published by Alexander Inkin
npm install @ng-web-apis/mutation-observer!ng-web-apis logo Mutation Observer API for Angular
> Part of 
>
> Web APIs for Angular
This is a library for declarative use of
Mutation Observer API with Angular.
Install
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
Usage
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.
Configuring
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.
Example
`html
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
Universal package for this, see
this example.
Demo
You can try online demo here
See also
Other Web APIs for Angular by
@ng-web-apis