ngx-bootstrap-confirm
Version:
Bootstrap confirm provider for Angular 11+
105 lines (88 loc) • 1.98 kB
Markdown
# 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