Open modal window (dialog box) for your angular2 applications using bootstrap3. If you don't want to use it without bootstrap - simply create proper css classes. Please star a project if you liked it, or create an issue if you have problems with it.
-
Install npm module:
npm install ng2-modal --save
-
If you are using system.js you may want to add this into
map
andpackage
config:{ "map": { "ng2-modal": "node_modules/ng2-modal" }, "packages": { "ng2-modal": { "main": "index.js", "defaultExtension": "js" } } }
Import
ModalModule
in your app. Then you can usemodal
component:<modal title="Modal title" cancelButtonLabel="cancel" submitButtonLabel="submit" modalClass="modal-lg modal-sm any-other-css-class" [hideCloseButton]="true|false" [closeOnEscape]="true|false" [closeOnOutsideClick]="true|false" (onOpen)="actionOnOpen()" (onClose)="actionOnClose()" (onSubmit)="actionOnSubmit()"> <modal-header> Modal header content goes there. </modal-header> <modal-content> Modal body content goes there. </modal-header> <modal-footer> Modal footer content goes there. </modal-footer> </modal>
First, import
ModalModule
in your app. If you want your modals to be opened within routes, then<route-modal></route-modal>
should be used instead.import {Component} from "@angular/core"; import {ModalModule} from "ng2-modal"; @Component({ selector: "app", template: ` <div class="row"> <button (click)="myModal.open()">open my modal</button> <modal #myModal> <modal-header> <h1>Modal header</h1> </modal-header> <modal-content> Hello Modal! </modal-content> <modal-footer> <button class="btn btn-primary" (click)="myModal.close()">close</button> </modal-footer> </modal> </div> ` }) export class App { } @NgModule({ imports: [ // ... ModalModule ], declarations: [ App ], bootstrap: [ App ] }) export class AppModule { }
<!-- first modal: modal with custom header, content and footer --> <div class="row"> <button (click)="firstModal.open()">modal with custom header content and footer</button> <modal #firstModal> <modal-header> <h1>I am first modal</h1> </modal-header> <modal-content> This modal has its own header, content and footer. </modal-content> <modal-footer> <button class="btn btn-primary" (click)="firstModal.close()">okay!</button> </modal-footer> </modal> </div> <!-- second modal: disable close button --> <div class="row"> <button (click)="secondModal.open()">modal without close button</button> <modal #secondModal [hideCloseButton]="true"> <modal-header> <h1>I am second modal</h1> </modal-header> <modal-content> This modal does not have close button. </modal-content> <modal-footer> <button class="btn btn-primary" (click)="secondModal.close()">okay!</button> </modal-footer> </modal> </div> <!-- third modal: disable close button --> <div class="row"> <button (click)="thirdModal.open()">modal that cannot be simply closed</button> <modal #thirdModal [closeOnEscape]="false" [closeOnOutsideClick]="false"> <modal-header> <h1>I am third modal</h1> </modal-header> <modal-content> You cannot close this modal by pressing "ESC" button or clicking outside of the modal. </modal-content> <modal-footer> <button class="btn btn-primary" (click)="thirdModal.close()">okay!</button> </modal-footer> </modal> </div> <!-- forth modal: this modal has default title and cancle button --> <div class="row"> <button (click)="forthModal.open()">modal that has title and cancel button</button> <modal #forthModal title="I am forth modal" cancelButtonLabel="close it"> <modal-content> You can simply use "title" attribute to provide a modal default header.<br/> Also you can add default cancel button by providing a label to it. </modal-content> </modal> </div> <!-- fifth modal: this modal uses extra "large class" --> <div class="row"> <button (click)="fifthModal.open()">large modal</button> <modal #fifthModal title="I am fifth modal" cancelButtonLabel="close it" modalClass="modal-lg"> <modal-content> Very large modal. </modal-content> </modal> </div> <!-- sixth modal: this modal uses extra "small class" --> <div class="row"> <button (click)="sixthModal.open()">small modal</button> <modal #sixthModal title="I am sixth modal" cancelButtonLabel="close it" modalClass="modal-sm"> <modal-content> Very small modal. </modal-content> </modal> </div> <!-- seventh modal: this modal can listen close event --> <div class="row"> <button (click)="seventhModal.open()">it opens first modal after you close it</button> <modal #seventhModal title="I am seventh modal" cancelButtonLabel="close it" (onClose)="firstModal.open()"> <modal-content> Now try to close it and it will open you first modal. </modal-content> </modal> </div> <!-- eighth modal: this modal can listen close event --> <div class="row"> <button (click)="eighthModal.open()">it opens first modal right after you open it</button> <modal #eighthModal title="I am eighth modal" cancelButtonLabel="close it" (onOpen)="firstModal.open()"> <modal-content> This modal opened first modal right after you opened it. </modal-content> </modal> </div> <!-- ninth modal: this modal can do something after you click submit button --> <div class="row"> <button (click)="ninthModal.open()">it opens first modal after you click submit button</button> <modal #ninthModal title="I am ninth modal" submitButtonLabel="submit" (onSubmit)="firstModal.open()"> <modal-content> This modal has a submit button with your custom label. Also it can make an action after you click that submit button. Here it will open you first modal after you click submit. </modal-content> </modal> </div>
Take a look on samples in ./sample for more examples of usages.
ng2-modal's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.