I have a div at the top of a contact page that is supposed to show a success message after the user hits send. However Ngif doesn't appear to be respecting the condition that I have set. I'm kind of at a loss for what is happening here. Please help me find out why this isn't working. Code is below:
Html file
<h1>Contact</h1>
<div *ngIf="modalOpen" class="modalBox">
<div class="modal">
<h1 class="successMessage">Message Sent!</h1>
</div>
</div>
<div class="contact animate__animated animate__rotateInUpLeft">
<form
ngNativeValidate
class="contact-form container"
(submit)="sendEmail($event)"
>
<input
type="text"
name="name"
placeholder="Name"
class="form-control"
required
/>
<input
type="email"
name="email"
placeholder="Email"
class="form-control"
required
/>
<textarea
class="message"
name="message"
placeholder="Message"
class="form-control"
required
></textarea>
<button class="button" type="submit">Send</button>
</form>
</div>
Ts file
import { Component, OnInit } from '@angular/core';
import emailjs, { EmailJSResponseStatus } from 'emailjs-com';
@Component({
selector: 'app-contact-form',
templateUrl: './contact-form.component.html',
styleUrls: ['./contact-form.component.css'],
})
export class ContactFormComponent implements OnInit {
modalOpen = false;
public sendEmail(e: Event) {
e.preventDefault();
emailjs
.sendForm(
'service_692xmee',
'template_08mwokp',
e.target as HTMLFormElement,
'user_fho8Bk2ef5EPCShODrioc'
)
.then(
(result: EmailJSResponseStatus) => {
console.log(result.text);
},
(error) => {
console.log(error.text);
}
);
this.success();
}
success() {
this.modalOpen = true;
setTimeout(() => (this.modalOpen = false), 3000);
}
constructor() {}
ngOnInit(): void {}
}
App module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProjectsComponent } from './projects/projects.component';
import { HomeComponent } from './home/home.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatSidenavModule} from '@angular/material/sidenav'
import {MatToolbarModule} from '@angular/material/toolbar'
import {MatListModule} from '@angular/material/list'
import {MatIconModule} from '@angular/material/icon';
import {MatCardModule} from '@angular/material/card';
import { BlogComponent } from './blog/blog.component';
import { AboutComponent } from './about/about.component';
@NgModule({
declarations: [
AppComponent,
ProjectsComponent,
HomeComponent,
BlogComponent,
AboutComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatSidenavModule,
FormsModule,
MatToolbarModule,
MatListModule,
MatIconModule,
MatCardModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
