marsh-modal v0.0.6

Marsh-Modal

This package is built on top of Javascript Angular 5/6 Framework.

Features

* Easy Integration.
* No jquery.
* Different Options for modal.

Installation

This library is available on npm, install it with: npm install --save marsh-modal.

Usage

1. After NPM installation import AngularModalModule in app module

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    import {AngularModalModule} from './angular-modal/angular-modal.module';
    @NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AngularModalModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }

2. Add modal tag in html

    <button class="button" type="button" [modalTrigger] ="modalId">Click Me!</button>
    <modal #modalId [modalOptions] ="options">
        <modalheader>modalHeader</modalheader>
        <modalcontent>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit incidunt quam, cum magni officiis eligendi cumque deserunt obcaecati ullam rem impedit at expedita architecto mollitia, magnam, dolores quibusdam explicabo recusandae.
        </modalcontent>
        <modalfooter>
            <button id="myBtn" (click) ="modalId.closeModal()">close</button>
        </modalfooter>
    </modal>

3. In component.ts delcare modal element

       @ViewChild('modalId')modalId;

   use modal properties and pass to modalOptions in html

       this.options ={
       outerClick:true,
       closeOnEscape:false,
       modalSize:'Small',
       modalEffect:'zoomIn',
       hideCloseIcon:false
       }

   use closeModal() method to close modal

4. Properties