# ax-modal

> Simple Resizable and draggable modal component.

Latest version **0.2.1** (published 2018-08-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install ax-modal
pnpm add ax-modal
yarn add ax-modal
bun add ax-modal
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2018-08-26 |
| First published | 2018-08-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 6.8 MB |
| Known vulnerabilities | 0 (+21 in 3 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | behzad88 |
| Keywords | ax-modal, modal, ng2modal |

## Links

- npm: https://www.npmjs.com/package/ax-modal
- Repository: https://github.com/behzad888/ng-modal
- Homepage: https://github.com/behzad888/ng-modal#readme
- Issues: https://github.com/behzad888/ng-modal/issues
- npm.io page: https://npm.io/package/ax-modal

## Dependencies (12)

- [rxjs](https://npm.io/package/rxjs.md) ^6.0.0
- [core-js](https://npm.io/package/core-js.md) ^2.5.4
- [zone.js](https://npm.io/package/zone.js.md) ^0.8.26
- [@angular/core](https://npm.io/package/@angular/core.md) ^6.1.0
- [@angular/http](https://npm.io/package/@angular/http.md) ^6.1.0
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^6.1.0
- [@angular/common](https://npm.io/package/@angular/common.md) ^6.1.0
- [@angular/router](https://npm.io/package/@angular/router.md) ^6.1.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^6.1.0
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^6.1.0
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^6.1.0
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^6.1.0

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 0.2.1 (latest) — 2018-08-26
- 0.2.0 — 2018-08-26
- 0.1.0 — 2018-08-26

## README

# Angular 5 Resizable and draggable Modal

Simple Resizable and draggable modal component.
 (<a target="_blank" href="https://mazdik.github.io/ng-modal/">Demo</a>) 

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

@Component({
  selector: 'app-modal-demo',
  template: `
    <button type="button" class="button" (click)="modalRoot.show()">Open modal</button>
    <app-modal #modalRoot
               [modalTitle]="'Demo modal'"
               [width]="500"
               [zIndex]="1100"
               [autoZIndex]="false"
               (close)="onCloseModal()">
      <ng-container class="app-modal-body">
        <h3>MODAL DIALOG</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
          Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.</p>
      </ng-container>
      <ng-container class="app-modal-footer">
        <button type="button" class="button button3" (click)="modalRoot.hide()">Delete</button>
        <button type="button" class="button button1" (click)="modalRoot.hide()">Save</button>
        <button type="button" class="button button2" style="float: right;" (click)="modalRoot.hide()">Close</button>
      </ng-container>
    </app-modal>
  `
})
export class ModalDemoComponent {

  onCloseModal() {
  }

}
```

### Properties

| Attribute        | Type       | Default | Description |
|------------------|------------|---------|-------------|
| modalTitle       | string     | null    |             |
| width            | any        | null    |             |
| zIndex           | number     | null    |             |
| minWidth         | number     | 260     |             |
| minHeight        | number     | 200     |             |
| scrollTop        | boolean    | true    |             |
| maximizable      | boolean    | false   |             |
| backdrop         | boolean    | true    |             |
| styleClass       | string     | null    |             |

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