Create Contact Form and Send Data on Email - Angular 6 / Angular 7
Create a Contact Class
Create a Contact class in its own file in the src/app/cmspage folder.
Define field in contact class
Edit file src/app/cmspage/cmspage.module.ts
You add the FormsModule to the list of imports defined in the @NgModule decorator. This gives the application access to all of the template-driven forms features, including ngModel.
Cmspage Service and Http Client
Edit service file src/app/cmspage/cmspage.service.ts
Import Contact Class for typed data
Import HttpHeaders for set headers.
Create httpOptions object for set content type.
Create method contactForm for send data to server.
Import Service in contact-form.component.ts
Edit component file src/app/cmspage/contact-form/contact-form.component.ts
Import Router for navigate url
Import CmspageService service.
Import Contact for typed data.
HTML of Contact Form
Edit file src/app/cmspage/contact-form/contact-form.component.html.
Change is style.css
Edit css file src/styles.css
Changes in API
Edit controller file Api.php and create two more mehtods contact() and sendemail()
Edit model file Api_model.php and create method insert_contact()
Changes in Database
Create one more table contacts
Please click below YouTube button for subscribe my channel truecodex for latest videos.
Angular Project Login - username: admin and password: admin
Angular 6/7 Tutorial in Hindi
truecodex.com provides video tutorial for enough understanding of all the necessary components of Angular 6 and Angular 7.
truecodex.com will keep uploading videos of the latest features of Angular. Please subscribe my channel for latest videos.