# @vicoders/ng-modal

> - [Vicoders NgModal](#vicoders-ngmodal) - [Installation](#installation) - [Supported browsers](#supported-browsers) - [Usage](#usage) - [Alert](#alert) - [Confirmation](#confirmation) - [Components as content](#components-as-content) -

Latest version **1.0.1** (published 2020-01-14) · 0 weekly downloads

## Install

```sh
npm install @vicoders/ng-modal
pnpm add @vicoders/ng-modal
yarn add @vicoders/ng-modal
bun add @vicoders/ng-modal
```

## 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 | 2020-01-14 |
| First published | 2020-01-14 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 840.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | nguyenchung26011992, lebaotrung, nightfury |

## Links

- npm: https://www.npmjs.com/package/@vicoders/ng-modal
- npm.io page: https://npm.io/package/@vicoders/ng-modal

## Dependencies (1)

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

## Recent versions

- 1.0.1 (latest) — 2020-01-14

## README

# Vicoders NgModal 

- [Vicoders NgModal](#vicoders-ngmodal)
  - [Installation](#installation)
  - [Supported browsers](#supported-browsers)
  - [Usage](#usage)
    - [Alert](#alert)
    - [Confirmation](#confirmation)
    - [Components as content](#components-as-content)
  - [Note](#note)

## Installation

You need to have an Angular project with the supported Angular version. We strongly recommend using [Angular CLI](https://cli.angular.io) for this.

You also need to add Bootstrap 4 CSS to your application by using your preferred way (it really depends on the setup you're using). Ex. for Angular CLI you can [get Bootstrap from npm](https://www.npmjs.com/package/bootstrap) and update your `angular.json` with something like:

```json
"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]
```
> Please note that you need only CSS and **should not** add other JavaScript dependencies like `bootstrap.js`, `jQuery` or `popper.js` as this package's goal is to completely replace them.


After installing the above dependencies, install `@vicoders/ng-modal` via:

```shell
npm install @vicoders/ng-modal
```

Once installed you need to import our main module:
```js
import {VicodersNgModalModule} from '@vicoders/ng-modal';

@NgModule({
  ...
  imports: [VicodersNgModalModule, ...],
  ...
})
export class YourAppModule {
}
```

## Supported browsers

We support the same browsers and versions supported by both Bootstrap 4 and Angular, whichever is _more_ restrictive. See [Angular browser support](https://angular.io/guide/browser-support) and [Bootstrap browser support](https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/#supported-browsers) for more details, but on the high-level it should be something like:

* Chrome (45+)
* Firefox (40+)
* IE (10+)
* Edge (20+)
* Safari (7+)

## Usage

### Alert

`your-component.component.html`

```html
<button class="btn btn-primary" (click)="alert()">Click Me</button>
```

`your-component.component.ts`

```js
import { VicodersNgModal } from '@vicoders/ng-modal';
import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponentComponent {
  constructor(private modal: VicodersNgModal) {}

  alert() {
    this.modal.alert('This content should be alerted').result.then(
      result => {
        console.log({ result });
      },
      dimiss => {
        console.log({ dimiss });
      }
    );
  }
}

```

### Confirmation

`your-component.component.html`

```html
<button class="btn btn-primary" (click)="confirm()">Click Me</button>
```

`your-component.component.ts`

```js
import { VicodersNgModal } from '@vicoders/ng-modal';
import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
}) 
export class YourComponentComponent {
  constructor(private modal: VicodersNgModal) {}

  confirm() {
    this.modal.confirm('This content should be confirmed', { title: 'Confirm Prompt', modalClass: { 'custom-class': true }, modalStyle: { background: 'red' } }).result.then(
      result => {
        console.log({ result });
      },
      dimiss => {
        console.log({ dimiss });
      }
    );
  }
}

```

### Components as content

Prepare a component for modal content

`your-modal-content.component.html`

```html
<p>This content will display in your modal</p>
<p>{{ this_variable_can_be_set_outside }}</p>
<button type="button" class="btn btn-primary" (click)="activeModal.close(ModalCloseReasons.CONFIRM_BTN_CLICK)">Close</button>
<button type="button" class="btn btn-secondary" (click)="activeModal.dismiss(ModalDismissReasons.CANCEL_BTN_CLICK)">Dimiss</button>
```

`your-modal-content.component.ts`

```js
import { Component } from '@angular/core';
import { VicodersNgActiveModal, ModalCloseReasons, ModalDismissReasons } from '@vicoders/ng-modal';

@Component({
  selector: 'app-your-modal-content',
  templateUrl: './your-modal-content.component.html',
  styleUrls: ['./your-modal-content.component.scss']
}) 

export class YourModalContentComponent {
  public this_variable_can_be_set_outside = '';
  public ModalCloseReasons = ModalCloseReasons;
  public ModalDismissReasons = ModalDismissReasons;
  constructor() {
    constructor(public activeModal: VicodersNgActiveModal) {}
  }
}
```
> You can pass an existing component as content of the modal window. In this case remember to add content component as an `entryComponents` section of your `NgModule`.


Then use your component as content of modal

`your-component.component.html`

```html
<button class="btn btn-primary" (click)="open()">Click Me</button>
```

`your-component.component.ts`

```js
import { VicodersNgModal } from '@vicoders/ng-modal';
import { Component } from '@angular/core';
import { YourModalContentComponent } from './your-component-content.component.ts';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
}) 
export class YourComponentComponent {
  constructor(private modal: VicodersNgModal) {}

  open() {
    const modalRef = this.open(YourModalContentComponent);
    modalRef.componentInstance.this_variable_can_be_set_outside = 'Your information';
    modalRef.result.then(
      result => {
        console.log({ result });
      },
      dimiss => {
        console.log({ dimiss });
      }
    );
  }
}

```

## Note

For each method that listed above, we can add extra param: `options: VicodersModalOptions`

```js
export interface VicodersModalOptions {
  /**
   * `aria-labelledby` attribute value to set on the modal window.
   *
   * @since 2.2.0
   */
  ariaLabelledBy?: string;

  /**
   * If `true`, the backdrop element will be created for a given modal.
   *
   * Alternatively, specify `'static'` for a backdrop which doesn't close the modal on click.
   *
   * Default value is `true`.
   */
  backdrop?: boolean | 'static';

  /**
   * Callback right before the modal will be dismissed.
   *
   * If this function returns:
   * * `false`
   * * a promise resolved with `false`
   * * a promise that is rejected
   *
   * then the modal won't be dismissed.
   */
  beforeDismiss?: () => boolean | Promise<boolean>;

  /**
   * If `true`, the modal will be centered vertically.
   *
   * Default value is `false`.
   *
   * @since 1.1.0
   */
  centered?: boolean;

  /**
   * A selector specifying the element all new modal windows should be appended to.
   *
   * If not specified, will be `body`.
   */
  container?: string;

  /**
   * The `Injector` to use for modal content.
   */
  injector?: Injector;

  /**
   * If `true`, the modal will be closed when `Escape` key is pressed
   *
   * Default value is `true`.
   */
  keyboard?: boolean;

  /**
   * Scrollable modal content (false by default).
   *
   * @since 5.0.0
   */
  scrollable?: boolean;

  /**
   * Size of a new modal window.
   */
  size?: 'sm' | 'lg' | 'xl' | string;

  /**
   * A custom class to append to the modal window.
   */
  windowClass?: string;

  /**
   * A custom class to append to the modal backdrop.
   *
   * @since 1.1.0
   */
  backdropClass?: string;
}
```

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