Vicoders NgModal

• Vicoders NgModal
  • Installation
  • Supported browsers
  • Usage
    • Alert
    • Confirmation
    • Components as content
  • Note

Installation

You need to have an Angular project with the supported Angular version. We strongly recommend using Angular CLI 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 and update your angular.json with something like:

"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:

npm install @vicoders/ng-modal

Once installed you need to import our main module:

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 and Bootstrap browser support 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

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

your-component.component.ts

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

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

your-component.component.ts

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

<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

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

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

your-component.component.ts

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

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;
}