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

Speed Up Your Magento Store by 300%

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


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