ngx-bootstrap BsModal closing from child component

Question

I have a scenario after saving data to database I need to close the Bs-modal popup, and my saving is done in the child component so I passed the Bs-modal in the child component using ()Input and using there to hide the pop up but not able to read my modal in the child component

HTML Parent Component

<div bsModal #lgModal2="bs-modal" class="modal fade" tabindex="-1" 
     role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
          <h4 class="modal-title pull-left">Edit Product</h4>
          <button type="button" class="close pull-right" (click)="lgModal2.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
          </button>
          </div>
           <div class="modal-body">
           <app-edit-product [productId]="prodId" [modalId]="lgmodal2" #child ></app-edit-product>

           </div>
       </div>
     </div>
   </div>

Child Component TS

import { BsModalRef } from 'ngx-bootstrap';
export class EditProductComponent implements OnInit {
  @Input() modalId:BsModalRef;
  somefunction(){
    this.modalId.hide();
  }
}

Error:An Unexpected error occured!TypeError: Cannot read property 'hide' of undefined

Also tried

@Output() closeModal:EventEmitter<Event> = new EventEmitter();
@Input() onHide:any;

then

 somefunction(){
   this.closeModal.emit(this.onHide);
  }

any help will be great thanks!

Try to have this component as child component, referring [**this answer**](https://stackoverflow.com/questions/42735858/how-to-implement-modal-dialog-in-angular-2-and-above/42736058#42736058) — Aravind, Jan 19 '18 at 11:59
both are one and the same `ng2-bootstrap` was renamed to `ngx-bootstrap` — Aravind, Jan 19 '18 at 12:04
use @output and call the function in parent to close the modal — crystalthinker, Jan 19 '18 at 12:06
@crystalthinker check the edit in above question and I try to follow your comment please can you point out the mistake? — phpdroid, Jan 19 '18 at 19:07
@phpdroid donot need to pass any data . Just call a function in parent to hide the modal. The modal instance is already available in parent. Hope that helps — crystalthinker, Jan 20 '18 at 20:18

score 5 · Accepted Answer · answered Jan 19 '18 at 19:19

HTML Parent:

<div bsModal #lgModal2="bs-modal" class="modal fade" tabindex="-1" 
     role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
          <h4 class="modal-title pull-left">Edit Product</h4>
          <button type="button" class="close pull-right" (click)="hideModal()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
          </button>
          </div>
           <div class="modal-body">
           <app-edit-product [productId]="prodId" [modalId]="lgmodal2" (saveDone)="hideModal()" #child ></app-edit-product>

           </div>
       </div>
     </div>
   </div>

CHILD COMPONENT TS:

export class EditProductComponent implements OnInit {
  @Output() saveDone: EventEmitter<any> = new EventEmitter<any>();
  somefunction(){
    this.saveDone.emit();
  }
}

PARENT COMPONENT TS:

import { Component, ViewChild } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap/modal';
export class ParentComponent implements OnInit {
    @ViewChild('lgModal2') lgModal2: ModalDirective;
    hideModal(){
       this.lgModal2.hide();
    }
}

Hope this helps.

score 1 · Answer 2 · answered Jan 19 '18 at 12:50

1

You need to pass the event instead of Modal itself:

<app-edit-product [productId]="prodId" (onHide)="lgModal2.hide()" #child ></app-edit-product>

And then just handle it on the child component:

@Input()
onHide = new EventEmitter<void>();

doHide() {
  this.onHide.emit();
}

answered Jan 19 '18 at 12:50

dhilt

18,707
8
70
85

sorry doesn't work, but I got an idea where I can be wrong! – phpdroid Jan 19 '18 at 18:59
edited the question try to follow you, can you point out if any mistake? – phpdroid Jan 19 '18 at 19:08
1

@phpdroid You have mixed `Input` and `Output`... Only `Input` is needed as it provided here, in my answer. Also, no params are needed. And my `doHide` is your `somefunction`. The approach with `Output` and `ViewChild` (that you can see in another answer) also should work, but it is different approach. – dhilt Jan 19 '18 at 20:15

ngx-bootstrap BsModal closing from child component

2 Answers2