{"id":46871732,"url":"https://github.com/ynmstudio/ngx-mutation","last_synced_at":"2026-03-10T20:43:57.014Z","repository":{"id":65942675,"uuid":"602954707","full_name":"ynmstudio/ngx-mutation","owner":"ynmstudio","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-22T10:37:12.000Z","size":600,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-23T17:37:23.518Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ynmstudio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-02-17T09:56:58.000Z","updated_at":"2023-09-13T12:24:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"840f10da-5eee-4894-8816-02c914633fec","html_url":"https://github.com/ynmstudio/ngx-mutation","commit_stats":{"total_commits":8,"total_committers":1,"mean_commits":8.0,"dds":0.0,"last_synced_commit":"30a349d50fca0eb6662565aa56c711b91790b835"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ynmstudio/ngx-mutation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ynmstudio%2Fngx-mutation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ynmstudio%2Fngx-mutation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ynmstudio%2Fngx-mutation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ynmstudio%2Fngx-mutation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ynmstudio","download_url":"https://codeload.github.com/ynmstudio/ngx-mutation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ynmstudio%2Fngx-mutation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30353758,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T15:55:29.454Z","status":"ssl_error","status_checked_at":"2026-03-10T15:54:58.440Z","response_time":106,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-03-10T20:43:55.426Z","updated_at":"2026-03-10T20:43:57.008Z","avatar_url":"https://github.com/ynmstudio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NGX Mutation\n\nA service that emits changes being made to the DOM tree utilizing [Mutation Observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)\n\n[Demo](https://ynmstudio.github.io/ngx-mutation/)\n\n## Installation\n\n```shell\nnpm install ngx-mutation\n```\n\n## Usage\n\nThere are two approaches of using `ngx-mutation`. Both approaches results an `Observable\u003cNgxMutationResult\u003e`\n\n```ts\nexport interface NgxMutationResult {\n  readonly mutation: ReadonlyArray\u003cMutationRecord\u003e;\n}\n```\n\n### `injectNgxMutation()`\n\nIf you're on Angular 14+ and are using `inject()` for **Dependency Injection**, you can use `injectNgxMutation()` to grab the `Observable\u003cNgxMutationResult\u003e`\n\n```ts\n@Component({})\nexport class SomeComponent {\n  readonly mutationResult$ = injectNgxMutation(); // Observable\u003cNgxMutationResult\u003e\n}\n```\n\n`injectNgxMutation()` accepts a `Partial\u003cNgxMutationOptions\u003e` and will be merged with the default global options.\n\n```ts\nexport interface NgxMutationOptions {\n  /* \"config\" options that is passed in new MutationObserver */\n  config: MutationObserverInit;\n  /* time in ms to debounce the events; */\n  debounce: number;\n  /* emit in NgZone or not. Default to \"true\" */\n  emitInZone: boolean;\n  /* emit the initial DOMRect of nativeElement. Default to \"false\" */\n  emitInitialResult: boolean;\n}\n\nexport const defaultMutationOptions: NgxMutationOptions = {\n  config: {\n    attributes: true,\n    characterData: true,\n    childList: true,\n  },\n  debounce: 0,\n  emitInZone: true,\n  emitInitialResult: false,\n};\n```\n\n#### With `Output`\n\nInstead of getting the `Observable\u003cNgxMutationResult\u003e`, you can assign `injectNgxMutation()` to an `Output` directly\n\n```ts\n@Component({})\nexport class SomeComponent {\n  @Output() mutate = injectNgxMutation(); // mutate emits everytime NgxMutation emits\n}\n```\n\n```html\n\u003csome-component (ngxMutation)=\"onMutate($event)\"\u003e\u003c/some-component\u003e\n\u003c!-- $event is of type NgxMutationResult --\u003e\n```\n\n### `NgxMutation`\n\nIf you're not using `inject()`, you can use the `NgxMutation` directive\n\n```html\n\u003csome-component (ngxMutation)=\"onMutate($event)\"\u003e\u003c/some-component\u003e\n\u003csome-component\n  (ngxMutation)=\"onMutate($event)\"\n  [ngxMutationOptions]=\"optionalOptions\"\n\u003e\u003c/some-component\u003e\n```\n\n#### With `hostDirectives`\n\nWith Angular 15, you can also use `NgxMutation` as a `hostDirectives` and expose `ngxMutation` Output\n\n```ts\n@Component({\n  hostDirectives: [{ directive: NgxMutation, outputs: [\"ngxMutation\"] }],\n})\nexport class SomeComponent {\n  @HostListener(\"ngxMutation\", [\"$event\"])\n  onMutate(event: NgxMutationResult) {\n    // listen for mutation event from NgxMutation\n  }\n}\n```\n\n## Provide global `NgxMutationOptions`\n\nYou can use `provideNgxMutationOptions()` to provide global options for a specific Component tree. If you call `provideNgxMutationOptions()` in `bootstrapApplication()` (for Standalone) and `AppModule` (for NgModule)\nthen the options is truly global.\n\n## Contributions\n\nAll contributions of any kind are welcome.\n\n## Thanks\n\nThis directive is heavily inspired on the `ngx-resize` directive by [Chau Tran](https://twitter.com/Nartc1410). https://github.com/nartc/ngx-resize\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fynmstudio%2Fngx-mutation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fynmstudio%2Fngx-mutation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fynmstudio%2Fngx-mutation/lists"}