I am currently integrating Angular 5 and Bootstrap 3 for a project. One of the forms on my website sends the input field data via email and includes a modal. I want to be able to trigger the modal based on a successful or error response from the server. I attempted to use *ngIf to trigger the modal but it did not work as expected. Here is a snippet of the HTML code:
<div class="container">
<form>
<div>
<input></input>
</div>
</form>
<div *ngIf="emailSuccess" #modalInfo class="modal fade" id="modal">
modal body
</div>
Below is a portion of my .ts file:
sendEmail(data) {
this.appService.sendEmail(data.myForm.value).subscribe((data) => {
console.log('data', data);
if (data.success) {
this.emailSuccess = true;
this.messageHeader = 'Thank You';
this.messageBody = 'We received your email';
this.myForm.reset();
} else if (data.error) {
this.emailSuccess = false;
this.messageHeader = 'Error';
this.messageBody = 'Something went wrong. Please, check your form and try again';
}
});
}
sendEmail() is triggered by:
<button type="button" (click)="sendEmail(this)" class="btn btn-primary " [disabled]="!myForm.valid">Submit</button>