I am facing an issue where the click event is not being triggered from the parent component to display a Bootstrap 3 modal. I am getting the following error:
ERROR TypeError: this.target.triggerModal is not a function
This is what I have done so far:
Parent Component
@ViewChild('target') private target: ModalComponent;
ngOnInit(){
this.target.triggerModal();
}
<button #target>Open Modal</button>
Modal Component
export class ModalComponent implements OnInit {
constructor() { }
ngOnInit() {
}
triggerModal() {
console.log('Model opened');
$('#myModal').modal("show");
}
}
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>