Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 1x 101x 101x 101x 101x 101x 100x 87x 101x | /**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
import {
booleanAttribute,
Directive,
ElementRef,
inject,
input,
OnDestroy,
OnInit,
output
} from '@angular/core';
import { Subscription } from 'rxjs';
import { ElementDimensions, ResizeObserverService } from './resize-observer.service';
/**
* Directive to emit events on element size change. Use like this:
* `<div (siResizeObserver)="handleResize($event)">`
* When the size of the element changes, an event in the format
* `{ width: number, height: number }`
* will be emitted. Also an initial event will be emitted on init.
*
* By default, events are throttled and to an event every 100ms. To change
* this, add `[resizeThrottle]="200"` on the same element. Input in milliseconds.
*/
@Directive({
selector: '[siResizeObserver]'
})
export class SiResizeObserverDirective implements OnInit, OnDestroy {
/** @defaultValue 100 */
readonly resizeThrottle = input(100);
/** @defaultValue true */
readonly emitInitial = input(true, { transform: booleanAttribute });
readonly siResizeObserver = output<ElementDimensions>();
private subs?: Subscription;
private element = inject(ElementRef);
private service = inject(ResizeObserverService);
ngOnInit(): void {
this.subs = this.service
.observe(this.element.nativeElement, this.resizeThrottle(), this.emitInitial())
.subscribe(value => this.siResizeObserver.emit(value));
}
ngOnDestroy(): void {
this.subs?.unsubscribe();
}
}
|