ngx-heyl-modal

This package allows you to use a modal window in AngularX (2+) projects.

Please don't hesitate to ask for new features or report a bug on Github! Thanks

Summary

• 1. Features
• 2. Wiki
  • 2.1 Inputs & Functions
• 3. How to use

Updates

• 10 Jun. 2018
  • Re-created library with Angular 6
  • Fix closeButton not working
  • Review CSS
  • Removed ModalConfig class

1. Features

• Modal component
  • Easily usable
  • Minimal CSS to be easily customizable
  • Fade animation from top, bottom, left and right

2. Wiki

2.1 Inputs & Functions

| @Input() | Default value | Description | | -------| --------------| ----------- | | size | "70%" | Width of the modal | | fade | ModalFade.BOTTOM | Position from where the modal fade : "top" / "bottom" / "left" / "right" | | closeButton | true | Display or not the × button in the header |

ModalComponent's functions available :

| functions | Description | | -------| --------------| | show([callback]) | Show the modal, and call the callback if not undefined | | hide([callback]) | Hide the modal, and call the callback if not undefined |

3. How to use

1. Install npm module :

   npm i ngx-heyl-module

2. Import the module :

   Open your app.module.ts file and import the module :

   import { ModalModule } from "ngx-heyl-modal";
   @NgModule({
      imports: [ 
         ...,
         ModalModule
      ]
   })

3. Use <modal> component :

   Declare a modal in an html file

   <modal #modal fade="top" size="50%">
      <div class="modal-header">
         This is my header
      </div>
      <div class="modal-body">
         Here you can type some long text and html
      </div>
      <div class="modal-footer">
         <button (click)="modal.hide()">Close</button>
      </div>
   </modal>