ResizeObserver Component synced with Web Awesome 3.4.x

Angular directive support for the wa-resize-observer Web Component. The Resize Observer component offers a thin, declarative interface to the ResizeObserver API.

Overview

Import

Import the resizeObserver directive from the angular-awesome package:

// Import the resizeObserver directive
import { WaResizeObserverDirective } from 'angular-awesome/resize-observer';

Examples

WaResizeObserverDirective Usage Examples

Basic Usage

<wa-resize-observer (wa-resize)="onResize($event)">
  <div>Resize me!</div>
</wa-resize-observer>

Disabled Observer

<wa-resize-observer [disabled]="true">
  <div>Not being observed</div>
</wa-resize-observer>

Tracking Container Size

<wa-resize-observer (wa-resize)="handleResize($event)">
  <div class="responsive-container" [style.width.%]="containerWidth">
    Content that responds to size changes
  </div>
</wa-resize-observer>

API Reference

Styling