ngx-bootstrap modal: How to get a return value from a modal?
I used the solution from @Chandru, however to return a true
or false
, instead of:
openConfirmDialog() {
this.modalRef = this.modalService.show(HomeModalComponent);
this.modalRef.content.onClose.subscribe(result => {
console.log('results', result);
})
}
I simply used:
openConfirmDialog() {
this.modalRef = this.modalService.show(HomeModalComponent);
return this.modalRef.content.onClose;
}
Try like this :
myexample it's working correctly. hope this will help you
home.module.ts
import { ModalModule } from 'ngx-bootstrap';
@NgModule({
imports: [
ModalModule.forRoot()
]
})
home.component.html
<button class="btn btn-primary" (click)="openConfirmDialog()">Open Confirm box
</button>
home.component.ts
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';
export class HomeComponent {
public modalRef: BsModalRef;
constructor(
private homeService: HomeService,
private modalService: BsModalService
) { }
openConfirmDialog() {
this.modalRef = this.modalService.show(HomeModalComponent);
this.modalRef.content.onClose.subscribe(result => {
console.log('results', result);
})
}
}
home-modal.component.html
<div class="alert-box">
<div class="modal-header">
<h4 class="modal-title">Confirm</h4>
<button type="button" class="close" aria-label="Close" (click)="bsModalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure want to delete this node?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="onConfirm()">Yes</button>
<button type="button" class="btn btn-secondary" (click)="onCancel()">No</button>
</div>
</div>
home-modal.component.ts
import { Subject } from 'rxjs/Subject';
import { BsModalRef } from 'ngx-bootstrap/modal';
export class HomeModalComponent {
public onClose: Subject<boolean>;
constructor(private _bsModalRef: BsModalRef) { }
public ngOnInit(): void {
this.onClose = new Subject();
}
public onConfirm(): void {
this.onClose.next(true);
this._bsModalRef.hide();
}
public onCancel(): void {
this.onClose.next(false);
this._bsModalRef.hide();
}
}