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

This lesson also available on YouTube
Service Http Client API CodeIgniter MySQL Email Form

More Posts - Angular Project Training

Download Theme
Download Web API
Download Angular App
Watch Video for Project Setup
Watch Videos of More Tutorials

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.

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.

Angular 6 / Angular 7 Tutorial in Hindi

Please leave comments

19 Comments