{"id":13808350,"url":"https://github.com/ChristianKohler/ng-resize-observer","last_synced_at":"2025-05-14T02:31:41.555Z","repository":{"id":38599548,"uuid":"242588792","full_name":"ChristianKohler/ng-resize-observer","owner":"ChristianKohler","description":"Angular ResizeObserver","archived":false,"fork":false,"pushed_at":"2024-01-10T19:44:28.000Z","size":737,"stargazers_count":22,"open_issues_count":2,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-08-04T01:09:40.728Z","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/ChristianKohler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"publiccode":null,"codemeta":null}},"created_at":"2020-02-23T20:51:15.000Z","updated_at":"2024-02-29T16:08:40.000Z","dependencies_parsed_at":"2024-06-19T03:02:15.660Z","dependency_job_id":"6f63cbdb-2503-4aef-a492-f8b96e334a61","html_url":"https://github.com/ChristianKohler/ng-resize-observer","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChristianKohler%2Fng-resize-observer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChristianKohler%2Fng-resize-observer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChristianKohler%2Fng-resize-observer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChristianKohler%2Fng-resize-observer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChristianKohler","download_url":"https://codeload.github.com/ChristianKohler/ng-resize-observer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273234,"owners_count":17448073,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":"2024-08-04T01:01:40.701Z","updated_at":"2024-11-19T00:30:41.794Z","avatar_url":"https://github.com/ChristianKohler.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"# Angular Resize Observer\n\n## Installation\n\n```bash\nnpm install ng-resize-observer\n```\n\n## Usage\n\n```typescript\nimport {\n  NgResizeObserver,\n  ngResizeObserverProviders\n} from \"ng-resize-observer\";\n\n@Component({\n  ...\n  // 1. Add providers\n  providers: [...ngResizeObserverProviders]\n})\nexport class AppComponent {\n  // 2. Inject resize$\n  constructor(private resize$: NgResizeObserver) {}\n}\n```\n\n## Example\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport {\n  NgResizeObserver,\n  ngResizeObserverProviders,\n} from \"ng-resize-observer\";\nimport { map } from \"rxjs/operators\";\n\n@Component({\n  selector: \"app-root\",\n  template: \"width is {{ width$ | async }} px\",\n  styles: [\n    `\n      :host {\n        display: block;\n        border: 3px solid green;\n      }\n    `,\n  ],\n  providers: [...ngResizeObserverProviders],\n})\nexport class AppComponent {\n  width$ = this.resize$.pipe(map((entry) =\u003e entry.contentRect.width));\n\n  constructor(private resize$: NgResizeObserver) {}\n}\n```\n\n## Ponyfill\n\nThe ponyfill https://github.com/juggle/resize-observer is not bundled by default.\n\nTo include the bundle, use either\n\n```typescript\nproviders: [...ngResizeObserverProvidersWithPonyfill];\n```\n\non every component. Or import it once in a module:\n\n```typescript\n@NgModule({\n    imports: [NgResizeObserverPonyfillModule]\n})\n```\n\n## Warning\n\nAngular does not zone patch resize-observer. Nor does this library. This means that change detection is not triggered in certain async situations. To be safe its recommended to add the zone patch for resize-observer in your polyfill.ts.\n\n```typescript\n// polyfill.js\nimport \"zone.js/dist/zone-patch-resize-observer\";\n```\n\n## Prefer a directive over a observable?\n\nCheck out: https://www.npmjs.com/package/ngx-resize-observer\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FChristianKohler%2Fng-resize-observer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FChristianKohler%2Fng-resize-observer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FChristianKohler%2Fng-resize-observer/lists"}