To add Bootstrap to your project, make sure to also install @types/bootstrap
npm install --save @types/bootstrap
After installing, you can use TypeScript to control a Modal. For example:
<!--using template reference in the button-->
<button type="button" class="btn btn-primary" (click)="show(modal)">
Launch demo modal
</button>
<!--referencing the modal using template reference-->
<div #modal class="modal fade" tabindex="-1" >
//Modal content here...
</div>
In your .ts file:
import {Modal} from 'bootstrap' //<--import Modal
show(modalElement){
const modal=new Modal(modalElement);
modal.show();
}
You can also utilize ViewChild for this purpose:
@ViewChild('modal') modalRef
show(){
const modal=new Modal(this.modalRef.nativeElement);
modal.show();
}
If your child component contains the modal, use a template reference variable in the child and access it in the parent component like this:
<button type="button" (click)="show(child.modal)">
Launch demo modal
</button>
<child #child></child>
//Using nativeElement in this case
show(modalRef){
const modal=new Modal(modalRef.nativeElement);
modal.show();
}
Check out the StackBlitz example