Notice!

It is a copy of ng-bootstrap modal with only a little change.

You can use ngx-dialog without the dependency of bootstrap or ng-bootstrap.

Getting Started

Installation

npm install ngx-dialog --save-dev

Import to App module

import { NgxDialogModule } from 'ngx-dialog';
@NgModule( {
	imports: [
		...
		NgxDialogModule.forRoot(),
	],
	...
} ) export class AppModule { }

Import styles

There are two ways to import the styles .

@import "~ngx-dialog/styles";

in one of you style files.

OR

import "nix-dialog/styles";

in one of your ts files, for example vendor.ts.

Methods

open( content:any, options:NgxDialogOptions )

NgxDialogService

The same as ng-modal, but add some more options:

data

Example

import { Component } from '@angular/core';
import { NgxDialogService }  from 'ngx-dialog';

@Component({
	selector: 'page-dialog',
	template: `
		<button (click)="open(myDialog)">Button</button>
		<ng-template #myDialog let-c="close">
			This dialog looks ugly by default
			<button (click)="c()">Close</button>
		</ng-template>
 	`
})
export class PageDialogComponent {
	constructor( private ngxDialog: NgxDialogService ) {}

	open( content:any ) {
		this.ngxDialog.open( content, {
			windowClass: 'mydialog'
		} );
	}
}

Tips

• The custom styles need to be put in the global scope style if the container of the dialog is body.