https://mattlewis92.github.io/angular-resizable-element/demo/
An angular 4.0+ directive that allows an element to be dragged and resized
Install through npm:
npm install --save angular-resizable-element
Then use it in your app like so:
import {Component} from '@angular/core';
import {ResizeEvent} from 'angular-resizable-element';
@Component({
selector: 'demo-app',
// you should add some styles to the element. See the demo folder for a more fleshed out example
template: `
<div
mwlResizable
[enableGhostResize]="true"
[resizeEdges]="{bottom: true, right: true, top: true, left: true}"
(resizeEnd)="onResizeEnd($event)">
</div>
`
})
export class MyComponent {
onResizeEnd(event: ResizeEvent): void {
console.log('Element was resized', event);
}
}
// now use within your apps module
import {NgModule} from '@angular/core';
import {ResizableModule} from 'angular-resizable-element';
@NgModule({
declarations: [MyComponent],
imports: [ResizableModule],
bootstrap: [MyComponent]
})
class MyModule {}You may also find it useful to view the demo source.
<script src="node_modules/angular-resizable-element/angular-resizable-element.js"></script>
<script>
// everything is exported on the angularResizableElement namespace
</script>
All documentation is auto-generated from the source and can be viewed here: https://mattlewis92.github.io/angular-resizable-element/docs/
- Install Node.js and NPM (should come with)
- Install local dev dependencies:
npm installwhile current directory is this repo
Run npm start to start a development server on port 8000 with auto reload + tests.
Run npm test to run tests once or npm run test:watch to continually run tests.
npm run releaseMIT