# angular-elements-resizer

> Angular directive that allows element to be resized in all directions. Works without adding borders to the element.This directive is very light and will not trigger change Detection because it works outside of NgZone

Latest version **2.1.2** (published 2020-10-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-elements-resizer
pnpm add angular-elements-resizer
yarn add angular-elements-resizer
bun add angular-elements-resizer
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2020-10-20 |
| First published | 2020-09-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 157.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Areg Sargsyan |
| Maintainers | areg_sargsyan |
| Keywords | Angular, angular2+, resize, resizable element, directive, angular10, directive |

## Links

- npm: https://www.npmjs.com/package/angular-elements-resizer
- Repository: https://github.com/AregSargsyan/ResizeLibrary
- Homepage: https://github.com/AregSargsyan/ResizeLibrary#readme
- Issues: https://github.com/AregSargsyan/ResizeLibrary/issues
- npm.io page: https://npm.io/package/angular-elements-resizer

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 2.1.2 (latest) — 2020-10-20
- 2.1.1 — 2020-09-30
- 2.1.0 — 2020-09-30
- 1.0.10 — 2020-09-29
- 0.0.10 — 2020-09-28
- 0.0.9 — 2020-09-28
- 0.0.6 — 2020-09-28
- 0.0.5 — 2020-09-28
- 0.0.4 — 2020-09-28
- 0.0.3 — 2020-09-28
- 0.0.2 — 2020-09-28

## README

# AngularElementsResizer

Angular directive that allows element to be resized in all directions.
Works without adding borders to the element. This directive is very light and will not trigger change Detection because it works outside of NgZone

[![GitHub stars](https://img.shields.io/github/stars/AregSargsyan/ResizeLibrary.svg)](https://github.com/AregSargsyan/ResizeLibrary/stargazers)

## Demo
https://aregsargsyan.github.io/DemoForResizerReusableModule/

## Usage

**Step 1:** Install angular-resize-element

```sh
npm i angular-elements-resizer
```

**Step 2:** Import angular resize element module into your app module

```ts
....
import { AngularElementsResizerModule } from 'angular-elements-resizer';

....

@NgModule({
    ...
    imports: [
        ....
        AngularElementsResizerModule
    ],
    ....
})
export class AppModule { }
```

**Step 3:** Add ts code to the component
```ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div resizable></div>`,
  styles: ['div { position: absolute; width: 300px;height: 400px; background: red; }']
})
export class AppComponent {
}

```
**Note:**  The css part here is only for example (for visualization) you can use whatever styles you want

## API

| Outputs      | Type   | Description
|----------------|--------|------------
| resizingStart | () => EventInterface | This event is fired when resize is started (only one time) 
| resizingElement | () => EventInterface | This event is fired when mouse move and size is changed 
| resizingEnd | () => EventInterface | This event is fired when mouse up and resize is finished (only one time) 

## Further help

In case of questions feel free to contact me https://linkedin.com/in/areg-sargsyan

## License
[MIT](https://choosealicense.com/licenses/mit/)

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