Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ChristianKohler/ng-resize-observer
Angular ResizeObserver
https://github.com/ChristianKohler/ng-resize-observer
Last synced: 2 months ago
JSON representation
Angular ResizeObserver
- Host: GitHub
- URL: https://github.com/ChristianKohler/ng-resize-observer
- Owner: ChristianKohler
- License: mit
- Created: 2020-02-23T20:51:15.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-01-10T19:44:28.000Z (about 1 year ago)
- Last Synced: 2024-08-04T01:09:40.728Z (6 months ago)
- Language: TypeScript
- Size: 720 KB
- Stars: 22
- Watchers: 3
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ng-resize-observer
- fucking-awesome-angular - ng-resize-observer
- fucking-awesome-angular - ng-resize-observer
README
# Angular Resize Observer
## Installation
```bash
npm install ng-resize-observer
```
## Usage
```typescript
import {
NgResizeObserver,
ngResizeObserverProviders
} from "ng-resize-observer";
@Component({
...
// 1. Add providers
providers: [...ngResizeObserverProviders]
})
export class AppComponent {
// 2. Inject resize$
constructor(private resize$: NgResizeObserver) {}
}
```
## Example
```typescript
import { Component } from "@angular/core";
import {
NgResizeObserver,
ngResizeObserverProviders,
} from "ng-resize-observer";
import { map } from "rxjs/operators";
@Component({
selector: "app-root",
template: "width is {{ width$ | async }} px",
styles: [
`
:host {
display: block;
border: 3px solid green;
}
`,
],
providers: [...ngResizeObserverProviders],
})
export class AppComponent {
width$ = this.resize$.pipe(map((entry) => entry.contentRect.width));
constructor(private resize$: NgResizeObserver) {}
}
```
## Ponyfill
The ponyfill https://github.com/juggle/resize-observer is not bundled by default.
To include the bundle, use either
```typescript
providers: [...ngResizeObserverProvidersWithPonyfill];
```
on every component. Or import it once in a module:
```typescript
@NgModule({
imports: [NgResizeObserverPonyfillModule]
})
```
## Warning
Angular 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.
```typescript
// polyfill.js
import "zone.js/dist/zone-patch-resize-observer";
```
## Prefer a directive over a observable?
Check out: https://www.npmjs.com/package/ngx-resize-observer