@ng-web-apis/mutation-observer

A library for idiomatic use of MutationObserver with Angular

Showing:

Popularity

Downloads/wk

2.1K

GitHub Stars

32

Maintenance

Last Commit

1yr ago

Contributors

0

Package

Dependencies

1

Size (min+gzip)

1.1KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

ng-web-apis logo Mutation Observer API for Angular

Part of Web APIs for Angular

npm version npm bundle size Travis (.com) Coveralls github angular-open-source-starter

This is a library for declarative use of Mutation Observer API with Angular.

Install

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

Usage

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.

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

<div
    subtree
    childList
    characterData
    attributeFilter="title, aria-label"
    [title]="title"
    [attr.aria-label]="label"
    (waMutationObserver)="onMutation($event)"
>
    ...
</div>

Browser support

IE / EdgeFirefoxChromeSafari
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 our 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

Open-source

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial