https://github.com/ynmstudio/ngx-mutation
https://github.com/ynmstudio/ngx-mutation
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ynmstudio/ngx-mutation
- Owner: ynmstudio
- License: mit
- Created: 2023-02-17T09:56:58.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-22T10:37:12.000Z (over 2 years ago)
- Last Synced: 2025-09-23T17:37:23.518Z (9 months ago)
- Language: TypeScript
- Size: 586 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# NGX Mutation
A service that emits changes being made to the DOM tree utilizing [Mutation Observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)
[Demo](https://ynmstudio.github.io/ngx-mutation/)
## Installation
```shell
npm install ngx-mutation
```
## Usage
There are two approaches of using `ngx-mutation`. Both approaches results an `Observable`
```ts
export interface NgxMutationResult {
readonly mutation: ReadonlyArray;
}
```
### `injectNgxMutation()`
If you're on Angular 14+ and are using `inject()` for **Dependency Injection**, you can use `injectNgxMutation()` to grab the `Observable`
```ts
@Component({})
export class SomeComponent {
readonly mutationResult$ = injectNgxMutation(); // Observable
}
```
`injectNgxMutation()` accepts a `Partial` and will be merged with the default global options.
```ts
export interface NgxMutationOptions {
/* "config" options that is passed in new MutationObserver */
config: MutationObserverInit;
/* time in ms to debounce the events; */
debounce: number;
/* emit in NgZone or not. Default to "true" */
emitInZone: boolean;
/* emit the initial DOMRect of nativeElement. Default to "false" */
emitInitialResult: boolean;
}
export const defaultMutationOptions: NgxMutationOptions = {
config: {
attributes: true,
characterData: true,
childList: true,
},
debounce: 0,
emitInZone: true,
emitInitialResult: false,
};
```
#### With `Output`
Instead of getting the `Observable`, you can assign `injectNgxMutation()` to an `Output` directly
```ts
@Component({})
export class SomeComponent {
@Output() mutate = injectNgxMutation(); // mutate emits everytime NgxMutation emits
}
```
```html
```
### `NgxMutation`
If you're not using `inject()`, you can use the `NgxMutation` directive
```html
```
#### With `hostDirectives`
With Angular 15, you can also use `NgxMutation` as a `hostDirectives` and expose `ngxMutation` Output
```ts
@Component({
hostDirectives: [{ directive: NgxMutation, outputs: ["ngxMutation"] }],
})
export class SomeComponent {
@HostListener("ngxMutation", ["$event"])
onMutate(event: NgxMutationResult) {
// listen for mutation event from NgxMutation
}
}
```
## Provide global `NgxMutationOptions`
You can use `provideNgxMutationOptions()` to provide global options for a specific Component tree. If you call `provideNgxMutationOptions()` in `bootstrapApplication()` (for Standalone) and `AppModule` (for NgModule)
then the options is truly global.
## Contributions
All contributions of any kind are welcome.
## Thanks
This directive is heavily inspired on the `ngx-resize` directive by [Chau Tran](https://twitter.com/Nartc1410). https://github.com/nartc/ngx-resize