Resize Observer Directive

Overview

When applied to an HTML element, the resize observer reports any changes in sizing to the element.

Required Imports

To use the button directive in your component, you must import the ButtonDirective from @clinicaloffice/mpage-developer and include it in your component imports array in your component TypeScript file.

e.g. your-component.ts

import {ResizeObserverDirective} from '@clinicaloffice/mpage-developer';

@Component({
  selector: 'your-component',
  imports: [ResizeObserverDirective],
  templateUrl: './your-component.component.html',
  styleUrl: './your-component.component.scss',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
}

Usage

To use the resize observer directive, apply it to an HTML element and assign a method in your class to intercept the size changes.

<div class="flex flex-gap" coResizeObserver (resized)="divResized($event)">

Your resize intercept method needs to have a single parameter of a DOMRectReadOnly type.

protected divResized(rect: DOMRectReadOnly): void {
    console.log(rect);
}