It is a library to make managment of bootstrap modal dialogs easier in Angular6+
npm install ng6-bootstrap-modal#Angular6 Bootstrap Modal Service
It is a library to make usage of bootstrap modal plugin easier in Angular6+.
Create clear and reusable modal components.
It makes managing dialogs painless and clearer.
Library does not use bootstrap js, only css.
Compatible with bootstrap 3 and bootstrap 4.
##Installation
``npm`
npm install ng6-bootstrap-modal
See Live Demo
###Without bootstrap?
Yes, you can create your own CSS. Just write css for .modal and .modal-dialog classes.
`css
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.fade {
opacity: 0;
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear;
}
.fade.in {
opacity: 1;
}
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
.modal.in .modal-dialog {
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
}
.modal.fade .modal-dialog {
-webkit-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
-webkit-transform: translate(0,-25%);
-ms-transform: translate(0,-25%);
-o-transform: translate(0,-25%);
transform: translate(0,-25%);
}
@media (min-width: 768px) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
}
`
##Quickstart
html
`
or
html
`
$3
app.module.ts:
typescript
import { NgModule} from '@angular/core';
import { CommonModule } from "@angular/common";
import { BrowserModule } from '@angular/platform-browser';
import { BootstrapModalModule } from 'ng6-bootstrap-modal';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
CommonModule,
BrowserModule,
BootstrapModalModule
],
bootstrap: [AppComponent]
})
export class AppModule {}
`
By default, dialog placeholder will be added to AppComponent.
But you can select custom placeholder (i.e. document body):
typescript
imports: [
...
BootstrapModalModule.forRoot({container:document.body})
]
`
###Step 2. Create your modal dialog component
Your modal dialog is expected to be extended from DialogComponent.
DialogService is generic class with two arguments:
1) input dialog data type (data to initialize component);
2) dialog result type;
Therefore DialogService is supposed to be a constructor argument of DialogComponent.
confirm.component.ts:
typescript
import { Component } from '@angular/core';
import { DialogComponent, DialogService } from "ng6-bootstrap-modal";
export interface ConfirmModel {
title:string;
message:string;
}
@Component({
selector: 'confirm',
template:
})
export class ConfirmComponent extends DialogComponent implements ConfirmModel {
title: string;
message: string;
constructor(dialogService: DialogService) {
super(dialogService);
}
confirm() {
// we set dialog result as true on click on confirm button,
// then we can get dialog result from caller code
this.result = true;
this.close();
}
}
###Step 3. Register created component to module
Add component to declarations and entryComponents section, because the component
will be created dynamically.
app.module.ts:
typescrit
import { NgModule} from '@angular/core';
import { CommonModule } from "@angular/common";
import { BrowserModule } from '@angular/platform-browser';
import { BootstrapModalModule } from 'ng6-bootstrap-modal';
import { ConfirmComponent } from './confirm.component';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
ConfirmComponent
],
imports: [
CommonModule,
BrowserModule,
BootstrapModalModule
],
//Don't forget to add the component to entryComponents section
entryComponents: [
ConfirmComponent
],
bootstrap: [AppComponent]
})
export class AppModule {}
`###Step 4. Usage
app.component.ts
typescript
import { Component } from '@angular/core';
import { ConfirmComponent } from './confirm.component';
import { DialogService } from "ng6-bootstrap-modal";
@Component({
selector: 'app',
template:
})
export class AppComponent {
constructor(private dialogService:DialogService) {}
showConfirm() {
let disposable = this.dialogService.addDialog(ConfirmComponent, {
title:'Confirm title',
message:'Confirm message'})
.subscribe((isConfirmed)=>{
//We get dialog result
if(isConfirmed) {
alert('accepted');
}
else {
alert('declined');
}
});
//We can close dialog calling disposable.unsubscribe();
//If dialog was not closed manually close it by timeout
setTimeout(()=>{
disposable.unsubscribe();
},10000);
}
}
##Documentation
###DialogComponent
Super class of all modal components.
####Class Overview
typescript
/**
* Dialog abstract class
* @template T1 - input dialog data
* @template T2 - dialog result
*/
abstract class DialogComponent implements T1 {
/**
* Constructor
* @param {DialogService} dialogService - instance of DialogService
*/
constructor(dialogService: DialogService)
/**
* Dialog result
* @type {T2}
*/
protected result:T2
/**
* Closes dialog
*/
public close:Function
}
`###DialogOptions
typescript
interface DialogOptions {
/**
* Dialog index (optional) to set order of modals
* @type {number}
*/
index?: number;
/**
* Timestamp to close dialog automatically after timeout (in msec)
* @type {number}
*/
autoCloseTimeout?: number;
/**
* Flag to close dialog by click on backdrop (outside dialog)
* @type {boolean}
*/
closeByClickingOutside?: boolean;
/**
* Custom backdrop color
* Default backdrop color you can set via css (.modal {backgroundColor:...})
* @type {string}
*/
backdropColor?: string;
}
`###DialogService
Service to show dialogs
###Class Overview
typescript
class DialogService {
/**
* Adds dialog
* @param {Type} component - Modal dialog component
* @param {T1?} data - Initialization data for component (optional) to add to component instance and can be used in component code or template
* @param {DialogOptions?} Dialog options
* @return {Observable} - returns Observable to get dialog result
*/
public addDialog(component:Type>, data?:T1, options: DialogOptions): Observable => {}
}
``