# @tbrashaw/angular-resize-event

> Angular 7 directive for detecting changes of an element size.

Latest version **1.0.1** (published 2019-04-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tbrashaw/angular-resize-event
pnpm add @tbrashaw/angular-resize-event
yarn add @tbrashaw/angular-resize-event
bun add @tbrashaw/angular-resize-event
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-04-08 |
| First published | 2019-04-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 54.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 170 |
| Author | Martin Volek |
| Maintainers | tbrashaw |
| Keywords | angular, resize, event |

## Links

- npm: https://www.npmjs.com/package/@tbrashaw/angular-resize-event
- Repository: https://github.com/vdolek/angular-resize-event
- Homepage: https://github.com/vdolek/angular-resize-event#readme
- Issues: https://github.com/vdolek/angular-resize-event/issues
- npm.io page: https://npm.io/package/@tbrashaw/angular-resize-event

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0
- [css-element-queries](https://npm.io/package/css-element-queries.md) 1.1.1

## Recent versions

- 1.0.1 (latest) — 2019-04-08
- 1.0.0 — 2019-04-08

## README

# Angular Resize Event

Angular 7 directive for detecting changes of an element size.

It is as simple as:

```xml
<div (resized)="onResized($event)"></div>
```

It internally uses `ResizeSensor` from [CSS Element Queries](https://github.com/marcj/css-element-queries).

[![Build Status](https://travis-ci.org/vdolek/angular-resize-event.svg?branch=master)](https://travis-ci.org/vdolek/angular-resize-event)
[![npm version](https://badge.fury.io/js/angular-resize-event.svg)](https://badge.fury.io/js/angular-resize-event)

## Using the library

Import the library in any Angular application by running:

```bash
$ npm install angular-resize-event
```

and then from your Angular `AppModule`:

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// Import the library module
import { AngularResizedEventModule } from 'angular-resize-event';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify AngularResizedEventModule library as an import
    AngularResizedEventModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
```

Once your library is imported, you can use its `resized` directive in your Angular application:

```xml
<div (resized)="onResized($event)"></div>
```

```typescript
import { Component } from '@angular/core';

// Import the resized event model
import { ResizedEvent } from 'angular-resize-event';

@Component({...})
class MyComponent {
  width: number;
  height: number;

  onResized(event: ResizedEvent) {
    this.width = event.newWidth;
    this.height = event.newHeight;
  }
}
```

## License

MIT © [Martin Volek](mailto:martin@vdolek.cz)

---
_Source: https://npm.io/package/@tbrashaw/angular-resize-event · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._