CODEWITHSUNDEEP
angularbootstrap-modalangular2-templatengx-bootstrap
Suman Singh
Suman Singh

Reputation: 31

How to get response 'yes' or 'no' using ngx-bootstrap modal

I am using ngx-bootstrap modal, but I want to use something like this

confirmDialog(message: string, note: string, onOk, onCancel) {
   // modal open
   // on click onOk button some action perform
   // on click onCancel button some action perform
}

So that I can use this method wherever I want to perform both action. Is this possible?

Upvotes: 3

Views: 1406

Answers (2)

user1044169
user1044169

Reputation: 2866

If you want a generic Yes/No component, one way is to create a callback method off initialState, and then use that method to communicate between the Yes/No component and the component that uses it. Similar to what they are doing.

Upvotes: 1

JCPhlux
JCPhlux

Reputation: 455

I am using ngx-bootstrap modal for a delete modal. To get it working you will need to use @Input and @Output to pass the refinances to and from the parent. The example below could easily be modified to fill your needs. If you are needing to pass a value from the child to the parent you can do that in the Event Emitter by changing the type to something like EventEmitter< any > and on the on the template change it to (deleteEvent)="delete($event)" the on the emit pass the value you want to send in the event this.deleteEvent.emit(true);.

My Delete Modal ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { BsModalRef } from "ngx-bootstrap";

@Component({
selector: 'delete-modal',
templateUrl: './delete.modal.component.html'})

export class DeleteModalComponent {
    @Input() modalRef: BsModalRef;
    @Output() deleteEvent = new EventEmitter();

    constructor() { }

    delete(): void {
        this.deleteEvent.emit();
    } 

}

My Delete Modal HTML

<div class="modal-header">
    <h3 class="modal-title pull-left">Confirm Delete</h3>
</div>     
<div class="modal-body">
    <p>Do you really want to delete item?</p>
    <div class="pull-right">
        <a class="btn btn-primary" role="button" (click)="delete()">Ok</a>
        <a class="btn btn-default" role="button" (click)="modalRef.hide()">Cancel</a>
    </div>
    <div class="clearfix"></div>
</div>

On the Component that I want to display the dialog

/*add a template somewhere*/
<ng-template #delete>
    <delete-modal [modalRef]="modalRef" (deleteEvent)="delete()"></delete-modal>
</ng-template>

Upvotes: 1

Related Questions