BsModalService confirmation modal with yes and no buttons

Greetings, I am using BsModalService with component. i have a modal with two buttons yes and no.

I would like to know how to track which button clicked. here yes or no button. I have gone through demo, but i could not find any solution.

let bsModalRef = this.modalService.show(ConfirmDeleteComponent, { animated: true, keyboard: true, backdrop: true, ignoreBackdropClick: false });

My modal 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">&times;</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)="bsModalRef.hide()">Yes</button>
        <button type="button" class="btn btn-secondary" (click)="bsModalRef.hide()">No</button>        
    </div>
</div>

[nielswitte]

A possible solution could be:

confirmation-modal.component.html

<form (ngSubmit)="onConfirm()" *ngIf="active">
    <div class="modal-header">
        <h4 class="modal-title pull-left">
            {{title}}
        </h4>
        <button type="button" class="close pull-right" (click)="hideConfirmationModal()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <p>{{body}}</p>
    </div>
    <div class="modal-footer">
        <div class="text-right">
            <button type="submit" class="btn btn-success">
                Yes
            </button>
            <button type="button" class="btn btn-default" (click)="onCancel()">
                No
            </button>
        </div>
    </div>
</form>

confirmation-modal.component.ts:

import { BsModalRef } from 'ngx-bootstrap/modal';
import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Component({
    selector: 'app-confirmation-modal',
    templateUrl: './confirmation-modal.component.html'
})
export class ConfirmationModalComponent implements OnInit {
    public active: boolean = false;
    public body: string;
    public title: string;
    public onClose: Subject<boolean>;

    public constructor(
        private _bsModalRef: BsModalRef
    ) { }

    public ngOnInit(): void {
        this.onClose = new Subject();
    }

    public showConfirmationModal(title: string, body: string): void {
        this.title = title;
        this.body =  body;
        this.active = true;
    }

    public onConfirm(): void {
        this.active = false;
        this.onClose.next(true);
        this._bsModalRef.hide();
    }

    public onCancel(): void {
        this.active = false;
        this.onClose.next(false);
        this._bsModalRef.hide();
    }

    public hideConfirmationModal(): void {
        this.active = false;
        this.onClose.next(null);
        this._bsModalRef.hide();
    }
}

opening the modal with the modal service from another component:

public showConfirmationModal(): void {
    const modal = this._bsModalService.show(ConfirmationModalComponent);
    (<ConfirmationModalComponent>modal.content).showConfirmationModal(
        'Title of modal',
        'Body text'
    );

    (<ConfirmationModalComponent>modal.content).onClose.subscribe(result => {
        if (result === true) {
            // when pressed Yes
        } else if(result === false) {
            // when pressed No
        } else {
            // When closing the modal without no or yes
        }
    });
}

[denniseffing]

Hi,

am I the only one who thinks this is highly inconvenient? So much boilerplate code for a very common use case. Passing data to the modal was implemented in July (see #2290), so I think that subscribing to a generic result of the modal should be implemented too. To be honest, I like the approach of this little npm package here: https://www.npmjs.com/package/ng2-bootstrap-modal but that is just a suggestion.

@valorkin Any chance something like this finds its way into ngx-bootstrap?