CODEWITHSUNDEEP
angularngx-bootstrap
MojoJojo
MojoJojo

Reputation: 4242

ngx bootstrap: How to get data from nested Modal?

I have an Angular component that displays a modal using the BsModalService service of ngx-bootstrap. I can pass data to my nested component using the content property. This works well so far.

On this modal, there is button which should open up another modal to prompt the user for input (textarea). When the user presses submit on this second modal, both the modals must be closed and the parent component must call a REST service and pass the reason captured in the textarea(via the second modal).

I got everything to work but can't figure out a clean way to pass the value of the text area to the original component.

Would appreciate inputs and suggestions on how to get the data back from the second nested modal back to the parent component.

Here's my code (imports/other code left out/renamed for brevity):

In the parent component:

export class parentComponent {

@ViewChild(BsModalRef) firstModal: BsModalRef;

promptUserForVerification() {
    this.firstModal = this.modalService.show(FirstModalComponent, Object.assign({}, this.modalConfig, {class: 'modal-lg'}));
    this.firstModal.content.setActionId(someId);
    this.firstModal.content.refreshDisplay();
}

}

In parentComponent's HTML template:

<!--plain HTML code for first Modal-->

<ng-template #secondModal>
    <div class="modal-header">
        <span class="fa fa-times-circle-o"></span>
        <button type="button" class="close pull-right" aria-label="Close" (click)="closeRejectionReasonModal()">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body rejection-body">
        <div class="body-title-container">
            <h5 class="title-with-border d-inline">You are about to reject </h5>
        </div>
        <span class="small">Please provide a reason :</span>
        <div class="reason">
        <!-- NEED THIS VALUE IN PARENT COMPONENT -->
            <textarea id="" cols="24" rows="3" class="w-100" required></textarea>
        </div>

    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="rejectPayment()">Submit</button>

    </div>

</ng-template>

Here's the relevant code for the firstModalComponent:

export class FirstModalComponent implements OnInit {


@ViewChild(BsModalRef) rejectedReasonModal: BsModalRef;
constructor(private modalService: BsModalService, public bsModalRef: BsModalRef) {

}

private modalConfig = {
    animated: true,
    keyboard: false,
    backdrop: true,
    ignoreBackdropClick: true

};
showRejectionModal(template: TemplateRef<any>) {
    this.rejectedReasonModal = this.modalService.show(seconModal, Object.assign({}, this.modalConfig, {class: 'modal-sm'}));
}
rejectPayment() {

    this.modalService.setDismissReason("REJECTED");

    this.rejectedReasonModal.hide();
    this.bsModalRef.hide();

}
}

How do I get data back from the second nested modal into the parent component?

Upvotes: 2

Views: 1639

Answers (1)

CascadiaJS
CascadiaJS

Reputation: 2515

You can share data in a shared data service https://angular.io/tutorial/toh-pt4

Upvotes: 1

Related Questions