How to use mail in html ionic 4
Posted on by divyajeetsinghfx

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 “tab1.page.html“. Example 1 with ionic mail in subject.

<a href="mailto:gitsof.com@gmail.com?subject=Write Subject &body=Write 
 Body" target="_blank">Mail to gitsof.com</a>

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

<a href="mailto:gitsof.com@gmail.com?subject=Write Subject&cc=something@gmail.com,  something2@gmail.com , something3@gmail.com&bcc=somethingbcc.com@gmail.com,something2bcc.com@gmail.com&body=Write 
 Body" target="_blank">Mail to gitsof.com with cc and bcc</a>

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

<a href="mailto:gitsof.com@gmail.com,google.com@gmail.com?subject=Write Subject &body=Write 
 Body" target="_blank">Mail to gitsof.com 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 “tab1.page.html” , Scss file “tab1.page.scss” , and ts file “tab1.page.scss”

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

<a  href="mailto:default@example.com?subject=Testing out mailto!&body=This is only a test!" class="visibility-hidden" target="_blank" id="hrefValue">Second Example</a>

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

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

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  body : any =""
  subject :any =""
  adminEmail: any ="something.com@gmail.com";

  constructor( ) {}

  submitReview(){
   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}` );
     document.getElementById('hrefValue').click()
    }

    
  }
}

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

.visibility-hidden{
    visibility: hidden !important;
}

Leave a Reply