项目作者: ClementVH

项目描述 :
Angular popup module
高级语言: TypeScript
项目地址: git://github.com/ClementVH/angular-popup.git
创建时间: 2018-07-28T20:00:02Z
项目社区:https://github.com/ClementVH/angular-popup

开源协议:MIT License

下载


@clementvh/angular-popup

Description

An angular module to display popup on screen, supported by angular >= 4.0.0

Install

  1. $ npm install @clementvh/angular-popup

Basic Usage

Add PopupModule and your component in your angular root module :

  1. import { NgModule } from '@angular/core';
  2. import { BrowserModule } from '@angular/platform-browser';
  3. import { PopupModule } from '@clementvh/angular-popup';
  4. import { AppComponent } from './app.component';
  5. @NgModule({
  6. imports: [
  7. BrowserModule,
  8. PopupModule
  9. ],
  10. declarations: [
  11. AppComponent
  12. ],
  13. entryComponents: [MyComponent],
  14. bootstrap: [AppComponent]
  15. })
  16. export class AppModule { }

Insert the popup component into your root component

  1. <ng-popup></ng-popup>
  2. <h1>App Component</h1>

Inject the PopupService into a component :

  1. import { Component } from '@angular/core';
  2. import { PopupService } from '@clementvh/angular-popup';
  3. @Component({
  4. selector: 'app-root',
  5. templateUrl: './app.component.html'
  6. })
  7. export class AppComponent {
  8. constructor(public popupService: PopupService) {}
  9. }

Call service methods to open a popup :

  1. this.popupService.openHtml(MyComponent, {
  2. id: 'toto-popup'
  3. });

PopupService’s available methods

openHtml()

Open a popup with the given component inside

  1. /**
  2. * @param {Type<any>} component The component to instatiate in the popup.
  3. * @param {Object} options Options given to the popup.
  4. */
  5. openHtml(component: Type<any>, options: any = {}): void;

openConfirm()

Open a popup confirm with the given title and text and two buttons at the bottom ‘Cancel’ and ‘Confirm’

  1. /**
  2. * @param {string} title The popup's title.
  3. * @param {string} text The popup(s content text.
  4. * @param {Object} options Options given to the popup.
  5. */
  6. openConfirm(title: string, text: string, options: any = {}): void;

openIframe()

Open a popup with an iframe to the given url

  1. /**
  2. * @param {string} url The url for the iframe
  3. * @param {Object} options Options given to the popup.
  4. */
  5. openIframe(url: string, options: any = {}): void;

Options

Options object should be a type of PopupOptions interface. The object may have following properties:

  • id - {string} - CSS class injected on the .app-popup-container block.
  • dismissable - {boolean} - if false clicking outside the popup won’t close it.
  • showClose - {boolean} - if false the close icon won’t be displayed.
  • confirm - {Function} - Function to call when confirm button is clicked.
  • cancel - {Function} - Function to call when cancel button is clicked.
  • confirmText - {string} - Text to inject in confirm button.
  • cancelText - {string} - Text to inject in cancel button.