How to use mail in html ionic 4

I know , there are lot’s of stuff already present regarding mail in html. But strategy to solve the user’s problem in easiest manner. whatever code , i will be use here , we can also use same code on website.

Prerequisite knowledge.

Sender name (In case of ionic and website. there is no need to write sender name . Because, it’s take directly from default app or redirect to mail site.

Receiver Name : – (Who is the message to ) .

Subject : – What the message is about?

CC:- Acronym of “Carbon Copy”

BCC:- Acronym of “Blind Carbon Copy”

Let’s jump on the code part to mail in ionic 4

First, we need to go on the project directory, You can write HTML code on HTML page ““. Example 1 with ionic mail in subject.

<a href=" Subject &body=Write 
 Body" target="_blank">Mail to</a>

Example 2, ionic mail with subject , cc and bcc.

<a href=" Subject&, ,, 
 Body" target="_blank">Mail to with cc and bcc</a>

Using Multiple email in ionic to send mail. Simply write email id with commas.

<a href=", Subject &body=Write 
 Body" target="_blank">Mail to with multiple mail id</a>

Example 3, How to pass dynamically email and subject to send mail. Please read carefully on example 3 . it’s important scenario, which can be use as website as well as ionic app both cases . Let’s Start , We need three thing here html file “” , Scss file “” , and ts file “”

  1. you go to the HTML page “” of the ionic page. Paste Given Below code in “ion-content” block.
<!-- inside ion-content block -->
    <!-- <ion-card-header>
      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
      <ion-card-title>Card Title</ion-card-title>
      <ion-label position="floating">Subject</ion-label>
      <ion-input  [(ngModel)]="subject" ></ion-input>
      <ion-label position="floating">Write Your Thought and feedback</ion-label>
      <ion-input  [(ngModel)]="body" ></ion-input>
  <ion-card-content class="text-align-center">
    <ion-button fill="outline" slot="end" (click)="submitReview()">Submit</ion-button>

<a  href=" out mailto!&body=This is only a test!" class="visibility-hidden" target="_blank" id="hrefValue">Second Example</a>

2. Go to ts file “” and write given Below code.

import { Component, OnInit } from '@angular/core';

  selector: 'app-tab1',
  templateUrl: '',
  styleUrls: ['']
export class Tab1Page {
  body : any =""
  subject :any =""
  adminEmail: any ="";

  constructor( ) {}

   if( this.subject == '' ||  this.subject == undefined ||   this.subject.trim().length  ==0 || this.subject.trim().length <3){
     console.log("Please enter valid subject for mail");
   else if(this.body == '' ||  this.body == undefined ||   this.body.trim().length  ==0 || this.body.trim().length <3){
     console.log('Please enter valid body part of mail');
   }else {

     document.getElementById('hrefValue').setAttribute( 'href', `mailto:${this.adminEmail}?subject=${this.subject}&body=${this.body}` );


3. Go to scss file , Writing css code to hide a tag in html , So We can paste given Below code .

    visibility: hidden !important;

Leave a Reply