ng-bootstrap modal：通过打字稿打开

Question

I'm having problems, I'd like help opening a mode from the component. I would like to open the modal when the user has been verified in a form.

.component.html

<ng-template #modalExample let-c="close" let-d="dismiss">
/** Modal body **/
</ng-template>

<form (ngSubmit)="f.form.valid && signin()" #f="ngForm" class="">
/** Buttons, labels, buttons **/ 
</form>

.component.ts

signin() { 
/**Calling backend**/ 
this.modalService( *REFERENCE TO MODAL HERE* )  
}

I've tried using

@ViewChild('modalExample') modalExample: ElementRef
this.modalService.open(this.modalExample);

Answer 1

The open method expects either a component or a template ref to function correctly, and ViewChild gives you a TemplateRef by default. To resolve this change your ViewChild declaration to:

@ViewChild('modalExample', {read: TemplateRef}) modalExample: TemplateRef<any>;

and pass that through to this.modalService.open(this.modalExample) when you want to open the modal and that should work.

The Bootstrap site has various examples you can look to see how to open the modal.