Create Contact Form and Send Data on Email - Angular 6 / Angular 7

Posted at: December 15, 2018 5:36 PM

Create a Contact Class

Create a Contact class in its own file in the src/app/cmspage folder.

Define field in contact class

Cmspage Module

Edit file src/app/cmspage/cmspage.module.ts

Import FormsModule

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

You can watch video on Create Contact Form and Send Data on Email - Angular 6 / Angular 7

Service Http Client API CodeIgniter MySQL Email Form

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

Angular 7 is a JavaScript based framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript, used to create Single Page Applications. provides video tutorial for enough understanding of all the necessary components of Angular 6 and Angular 7. will keep uploading videos of the latest features of Angular. Please subscribe my channel for latest videos.

Please leave comments

Speed Up Your Magento Store by 300%

Angular Templates

React Templates

Magento 2 Templates

truecodex launched free android app. You can download and install truecodex app on your mobile and get notification of the latest post.

Video Tutorials on YouTube