https://github.com/flyingnebulae/angular-popup
Angular popup module
https://github.com/flyingnebulae/angular-popup
angular angular-popup angular2 angular4 angular5 angular6 confirm dialog iframe modal module popup
Last synced: 4 months ago
JSON representation
Angular popup module
- Host: GitHub
- URL: https://github.com/flyingnebulae/angular-popup
- Owner: FlyingNebulae
- License: mit
- Created: 2018-07-28T20:00:02.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-10T19:52:18.000Z (about 7 years ago)
- Last Synced: 2025-06-24T20:47:15.266Z (4 months ago)
- Topics: angular, angular-popup, angular2, angular4, angular5, angular6, confirm, dialog, iframe, modal, module, popup
- Language: TypeScript
- Size: 566 KB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @clementvh/angular-popup
## Description
An angular module to display popup on screen, supported by angular >= 4.0.0
## Install
```sh
$ npm install @clementvh/angular-popup
```
## Basic Usage
### Add PopupModule and your component in your angular root module :
```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PopupModule } from '@clementvh/angular-popup';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
PopupModule
],
declarations: [
AppComponent
],
entryComponents: [MyComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
```
### Insert the popup component into your root component
```html
App Component
```
### Inject the PopupService into a component :
```ts
import { Component } from '@angular/core';
import { PopupService } from '@clementvh/angular-popup';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
constructor(public popupService: PopupService) {}
}
```
### Call service methods to open a popup :
```ts
this.popupService.openHtml(MyComponent, {
id: 'toto-popup'
});
```
## PopupService's available methods
### openHtml()
Open a popup with the given component inside
```ts
/**
* @param {Type} component The component to instatiate in the popup.
* @param {Object} options Options given to the popup.
*/
openHtml(component: Type, options: any = {}): void;
```
### openConfirm()
Open a popup confirm with the given title and text and two buttons at the bottom 'Cancel' and 'Confirm'
```ts
/**
* @param {string} title The popup's title.
* @param {string} text The popup(s content text.
* @param {Object} options Options given to the popup.
*/
openConfirm(title: string, text: string, options: any = {}): void;
```
### openIframe()
Open a popup with an iframe to the given url
```ts
/**
* @param {string} url The url for the iframe
* @param {Object} options Options given to the popup.
*/
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.