Angular2 Factory Made Modal Dialog
A fully generic, customizable and fluent factory modal window implementation for Angular2. only dependency for this Module is angular itself, works with any style preprocessor as the modal componenet itself gets genereted during runtime.
See the DEMO.
Note
This project is very much still a work in progress.
Installation
before you install please make sure you have an up and running angular2 projects, highly recomended using the angular-cli to start one .
npm install --save ng2-modal-dialog
Usage
- Import the module to your
app.module.ts
file and the modal component.
import { ModalModule } from 'ng2-modal-dialog/modal.module';import { LoginModalComponent } from './login-modal/login-modal.component';...declarations: [ ... LoginModalComponent ],imports: [ ... ModalModule ],
- Add a placeholder in the
app.componenet.html
{{title}}Login <!-- the place holder for all modals that will be opened -->
- In the parent component of the modal you will need to import the following.
import { ModalService } from 'ng2-modal-dialog/modal.module';import { LoginModalComponent } from './login-modal/login-modal.component';// The AppModule from the application srcimport { AppModule } from './app.module';... // Instancing a new ModalService in the parent component constructorconstructor(private modalService: ModalService) { } // Click function to open the modal openLoginModal(userCreds): void { // Service callback function to create the modal with an object passed as a parameter this.modalService.create(AppModule, LoginModalComponent, {userCreds}); }
login-modal.componenet.ts
import { Component } from '@angular/core';import { Modal } from 'ng2-modal-dialog/modal.module'; @Component({ selector: 'app-login-modal', templateUrl: './login-modal.component.html', styleUrls: ['./login-modal.component.css']})// the Modal import allows the usage of the @Modal alias that adds the Modal functions.@Modal()export class LoginModalComponent { loginStatus: boolean = true; closeModal: Function; // Will fetch the userCreds passed from the callback. userCreds; constructor() { } onCancel(): void { this.closeModal(); } onSubmit(formCreds): void { event.preventDefault(); if ((formCreds.username === this.userCreds.username) && (formCreds.password === this.userCreds.password)) { this.loginStatus = true; this.closeModal(); } else { this.loginStatus = false; } }}
login-modal.componenet.html
<!-- Modal Setup --> Admin login Email address Password Sign in Wrong Credentials! try 'user' as username and 'pass' as password. <!-- END Modal Setup --> <!-- Modal Overlay -->
login-modal.componenet.css
this is a full example of how to use the modal functionality, the component once finished its purpose will be destroyed.
TODOS
- Enhance transition and animation
- Add more functionality to the basic modal component
- Add more close options for the modal (eg. clicking outside of the modal)
- Add more complexed examples showing the usage of passing parameters from a DB/Backend callbacks.
License
MIT