UNPKG

ngx-bootstrap-confirm

Version:

Bootstrap confirm provider for Angular 11+

105 lines (88 loc) 1.98 kB
# NgxBootstrapConfirm Bootstrap confirm provider for Angular 11+ # Demo https://ngxconfirm.9lessons.info/ # Installation ``` npm install --save ngx-bootstrap ngx-bootstrap-confirm ``` or if you use yarn: ``` typescript yarn add ngx-bootstrap ngx-bootstrap-confirm ``` # Usage Import NgxBootstrapConfirmModule into your app's modules: ``` typescript import { NgxBootstrapConfirmModule } from 'ngx-bootstrap-confirm'; @NgModule({ imports: [ NgxBootstrapConfirmModule ] }) ``` Import NgxBootstrapConfirmService into your app's components: ``` typescript import { Component } from '@angular/core'; import { NgxBootstrapConfirmService } from 'ngx-bootstrap-confirm'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { constructor(private ngxBootstrapConfirmService: NgxBootstrapConfirmService){ } action() { let options ={ title: 'Sure you want to delete this comment?', confirmLabel: 'Okay', declineLabel: 'Cancel' } this.ngxBootstrapConfirmService.confirm(options).then((res: boolean) => { if (res) { console.log('Okay'); } else { console.log('Cancel'); } }); } } } ``` #app.component.html ``` html <button (click)="action()">Action</button> <router-outlet></router-outlet> ``` Copy in styles.scss ``` CSS .modal-dialog { width: 360px !important; margin-top: 120px; margin: 30px auto; .modal-content { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } .confirm { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); border-radius: 5px; min-height: 150px; .content { padding: 20px; border-radius: 10px; background-color: #fff !important; font-weight: 700; } .buttons { padding: 10px 15px; float: right; button { margin-right: 10px; } } } } ``` # License The MIT License (MIT) srinivas@9lessons.info