rbit-ng2-modal v0.0.1

RbitNg2Modal

Description

Simple modals library for angular 2+. Has very small number of dependencies and is easy to use. Inspired by sweetalert2 library.

Installation

npm i --save rbit-ng2-modal

Then just add the following code to your Module

import { RbitModalModule } from 'rbit-ng2-modal/src/app/app.module';


@NgModule{(
  bootstrap: [],
  declarations: [],
  imports: [
    RbitModalModule
  ]
)}

That's it. Now, you can use modals in your components.

How to use

Assuming everything works correct, basic modal may be the next:

 <-- /acomponent.component.html-->
 
 <rbit-modal
  title="Success!"
  text="We have received your message and we'll contact u ASAP"
  theme="default"
  type="success"
  [hidden]="modalIsHidden"
  actions="close"
  
  closeBtnText="Gotcha"
  (onClose)="closeIt()"
 >
 
</rbit-modal>
 

Interaction with modals

Next props may be passed to component.

• title {string}, required.
• text {string}, required.
• hidden {boolean}. Sets modal as visible or not.
• allowClose {boolean}. Allows buttons to emit close event.
• theme {string}. Currently only default theme supported. Bright and light themes are to be added in the next versions.
• type {string}. Currently only err and success values supported (success is default value); Info and warning types are to be added in the next versions.
• actions {string}. Available values: close, ok/close, link/close (close is default value). Depending on value passed, modal will have different buttons and will require different additional parameters. In all the cases u can specify text for each btn (using closeBtnText and okBtnText). If link/close value is chosen, first button will be a link, using angular router, so it requires link property.
• (onOk) and (onClose) events are fired on buttons click.

Dependencies

Only basic angular libraries (e.g. @angular/router and @angular/animations) + karma and material icons