I am facing a situation where I need to close the Bs-modal popup after saving data to the database. The saving process is done in the child component, so I passed the Bs-modal to the child component using ()Input. However, I am encountering an issue where I am unable to read my modal in the child component.
Parent Component's HTML:
<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">×</span>
</button>
</div>
<div class="modal-body">
<app-edit-product [productId]="prodId" [modalId]="lgmodal2" #child ></app-edit-product>
</div>
</div>
</div>
</div>
Child Component TypeScript:
import { BsModalRef } from 'ngx-bootstrap';
export class EditProductComponent implements OnInit {
@Input() modalId:BsModalRef;
somefunction(){
this.modalId.hide();
}
}
Error: An unexpected error occurred! TypeError: Cannot read property 'hide' of undefined
Another Attempt:
@Output() closeModal:EventEmitter<Event> = new EventEmitter();
@Input() onHide:any;
Then:
somefunction(){
this.closeModal.emit(this.onHide);
}
Any assistance on resolving this issue would be greatly appreciated. Thank you!