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 :

   1import { ModalModule } from "ngx-heyl-modal";
   2@NgModule({
   3   imports: [ 
   4      ...,
   5      ModalModule
   6   ]
   7})

3. Use <modal> component :

   Declare a modal in an html file

   1<modal #modal fade="top" size="50%">
   2   <div class="modal-header">
   3      This is my header
   4   </div>
   5   <div class="modal-body">
   6      Here you can type some long text and html
   7   </div>
   8   <div class="modal-footer">
   9      <button (click)="modal.hide()">Close</button>
   10   </div>
   11</modal>