https://github.com/mgechev/ngresizable

Simple, tree-shakable, AoT, Universal and Web Worker friendly resizable component for Angular (2 and beyond).
https://github.com/mgechev/ngresizable

angular resizable widget

Last synced: 28 days ago
JSON representation

Simple, tree-shakable, AoT, Universal and Web Worker friendly resizable component for Angular (2 and beyond).

• Host: GitHub
• URL: https://github.com/mgechev/ngresizable
• Owner: mgechev
• Created: 2017-01-12T15:30:41.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2022-01-27T12:18:33.000Z (almost 3 years ago)
• Last Synced: 2024-10-29T09:52:29.133Z (about 2 months ago)
• Topics: angular, resizable, widget
• Language: TypeScript
• Homepage: https://mgechev.github.io/ngresizable/
• Size: 1000 KB
• Stars: 116
• Watchers: 6
• Forks: 23
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

• awesome-angular-components - ngresizable - Simple, tree-shakable, AoT, Universal and Web Worker friendly resizable component for Angular (Uncategorized / Uncategorized)
• awesome-angular - ngresizable - Simple, tree-shakable, AoT, Universal and Web Worker friendly resizable component for Angular (Uncategorized / Uncategorized)
• awesome-angular-components - ngresizable - Simple, tree-shakable, AoT, Universal and Web Worker friendly resizable component for Angular (Uncategorized / Uncategorized)

README

        
[![Build Status](https://travis-ci.org/mgechev/ngresizable.svg?branch=master)](https://travis-ci.org/mgechev/ngresizable)

# Angular Resizable

Simple, tree-shakable, AoT, Universal and Web Worker friendly resizable component for Angular (4 and beyond).

For version compatible with Angular 2 install `0.1.2`.

Supports the following values of the `position` CSS property:

- `absolute`.

- `relative`.

# How to use?

```

$ npm i ngresizable --save

```

# API

## Outputs

  - `resizeStart: EventEmitter` - Resize start event.

  - `resizing: EventEmitter` - Resizing event.

  - `resizeEnd: EventEmitter` - Resize end event.

## Inputs

  - `width` - Width of the element number.

  - `height: number` - Height of the element.

  - `x: number` - x coordinate of the element.

  - `y: number` - y coordinate of the element.

  - `maxWidth: number` - Maximum width. Default `Infinity`.

  - `minWidth: number` - Minimum width. Default `0`.

  - `maxHeight: number` - Maximum height. Default `Infinity`.

  - `minHeight: number` - Minimum height. Default `0`.

  - `disableResize: boolean = false` - Disable the resize.

  - `directions: string[]` - An array which contains the resize directions. Default `['bottom', 'right']`.

  - `grid: ISize` - Resize in a grid. Default `{ width: 1, height: 1 }`.

  - `bound: IRectangle` - Bound the resize.

  - `ratio: number` - Resize ratio.

# Integration

Should work out of the box with webpack, respectively angular-cli. All you need to do is to include `NgResizableModule`:

```ts

import { NgResizableModule } from 'ngresizable';

@NgModule({

  imports: [NgResizableModule],

  ...

})

class AppModule {}

```

## Angular Seed

```ts

// tools/config/project.ts

...

// Add packages (e.g. ngresizable)

let additionalPackages: ExtendPackages[] = [{

  name: 'ngresizable',

  path: 'node_modules/ngresizable/ngresizable.bundle.js'

}];

this.addPackagesBundles(additionalPackages);

...

```

# License

MIT