angular2-modal
)This project is looking for a new maintainer, see #414 for details.
Version 4.x.x contains some breaking changes, please see the CHANGELOG
Modal / Dialog implementation for angular.
modal.alert()
.title('Hello World')
.body('In Angular')
.open();
Available plugins:
npm install ngx-modialog
http://plnkr.co/edit/lV7zsw7Yqossgs9JOfQU?p=preview
http://plnkr.co/edit/2ppVYl517GI1Byv8vVbG?p=preview
In your application root module definition add ModalModule
and the plugin you want to use:
We will use the bootstrap plugin (BootstrapModalModule
) for this introduction.
import { ModalModule } from 'ngx-modialog';
import { BootstrapModalModule } from 'ngx-modialog/plugins/bootstrap';
// lots of code...
@NgModule({
bootstrap: [ /* ... */ ],
declarations: [ /* ... */ ],
imports: [
/* ... */
ModalModule.forRoot(),
BootstrapModalModule
],
})
export class AppModule { /* lots of code... */ }
In any angular component or service inject the Modal
service and open a modal:
import { Component, ViewContainerRef } from '@angular/core';
import { Overlay } from 'ngx-modialog';
import { Modal } from 'ngx-modialog/plugins/bootstrap';
@Component({
selector: 'my-app',
template: `<button (click)="onClick()">Alert</button>`
})
export class AppComponent {
constructor(public modal: Modal) { }
onClick() {
const dialogRef = this.modal.alert()
.size('lg')
.showClose(true)
.title('A simple Alert style modal window')
.body(`
<h4>Alert is a classic (title/body/footer) 1 button modal window that
does not block.</h4>
<b>Configuration:</b>
<ul>
<li>Non blocking (click anywhere outside to dismiss)</li>
<li>Size large</li>
<li>Dismissed with default keyboard key (ESC)</li>
<li>Close wth button click</li>
<li>HTML content</li>
</ul>`)
.open();
dialogRef.result
.then( result => alert(`The result is: ${result}`) );
}
}
If you are using ngx-modialog version 3.X.X or below, open()
returned a promise so replace the last 2 lines with:
dialogRef
.then( dialogRef => {
dialogRef.result.then( result => alert(`The result is: ${result}`);
});
We are using the alert()
method, one of 3 (prompt, confirm)) fluent-api methods we call drop-ins
We then use the result
property to wait for the modal closing event.
Notes:
open()
method, which is used by all drop in's internally.Modal
service from the plugin and not from the root library.Import from the root should work but being explicit allow using multiple plugins.The Demo application is a full implementation of the library with the native plugins.
View it at shlomiassaf.github.io/ngx-modialog
The demo application is part of this repository and it is a great place to learn by example.
The demo application comes with a dynamic modal generator for the Boostrap plugin
Plugins serve as a concrete UI implementation for a modal.
It can be an implementation for a known library (e.g: bootstrap) or something completely unique
While ngx-modialog
has some built in plugins it is also possible to use external plugins from NPM, if someone decide to build one.
Built a plugin? I would love to know :)
ref issue#111
To avoid this problem use event.stopPropagation();
or put the element removal inside a setTimeout
call
As a sole author I find it difficult to maintain multiple open source projects.As a result it is hard for me to replay rapidly to requests/help/etc...
If you would like to contribute, please contact me, the community will thank you.
You can contribute via:
Thank you!
Shlomi.
TemplateRef 是 angular的 核心类 BsModalService 和 BsModalRef是 ngx-bootstrap里面的services 1.安装 项目目录安装 npm install ngx-bootstrap --save 2.引入 module文件 import { ModalModule } from 'ngx-bootstrap'; @NgModule({
ngx-weui 是一个使用 Angular 构建的 WeUI 组件。 在线示例以及API文档。
ngx-fastdfs 是 nginx + lua +fastdfs 实现分布式图片实时动态压缩。 install 进入docker目录docker build -t fastdfs:dev . 使用 docker -idt -p 80:80 fastdfs:dev /bin/bash进入容器执行/etc/rc.local 测试 进入容器执行test目录下的./test.sh或者直接执行下面脚本
ngx-markdown ngx-markdown is an Angular library that combines... Marked to parse markdown to HTML Prism.js for language syntax highlight Emoji-Toolkit for emoji support KaTeX for math expression rende
ngx-admin Who uses ngx-admin?| Documentation | Installation Guidelines | Angular templates New! Material theme for ngx-admin Material admin theme is based on the most popular Angular dashboard templat
@sweetalert2/ngx-sweetalert2 Official SweetAlert2 integration for Angular This is not a regular API wrapper for SweetAlert (which already works very well alone), it intends to provide Angular-esque ut
ngx-dropzone A lightweight and highly customizable Angular dropzone component for file uploads. For a demo see DEMO. And the CODE for the demo. Install $ npm install --save ngx-dropzone Usage // in ap
ngx-slick Support angular 6+, Slick 1.8.1 Example Installation To install this library, run: $ npm install ngx-slick --save Consuming your library Once you have published your library to npm, you can
Angular Module for displaying a feed of items in a masonry layout using https://github.com/desandro/masonry This package was originally a fork from https://github.com/jelgblad/angular2-masonry to allo