How to Create Quick Email Sending in Lightning Component

Hello friends today post, how to send Email using lightning component
so let start ....

Step=>1.
first open your developer console and goto...
                                                                         File=>New=>Lightning Component

                                   EmailSend.cmp

<aura:component controller="EmailSendController" implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
   
    <aura:attribute name="email" type="string"/>
    <aura:attribute name="subject" type="string"/>
    <aura:attribute name="body" type="string"/>
    <aura:attribute name="mailStatus" type="boolean" default="false"/>
   
    <div class="slds-box" style="width:700px;margin-top:10px;margin-left:10px;">
    <div class="slds-page-header" role="banner">
        <h1 class="slds-page-header__title slds--m-right--small slds-align-middle slds-truncate" title="this should match">
            Email Template: Quick Send Email
        </h1>
        <div class="slds-text-color--weak">by Ashish Kumar</div>
    </div>
   
    <aura:if isTrue="{!mailStatus}">
        <div role="alertdialog" tabindex="-1" area-labelledby="prompt-heading-id" area-describedby="prompt-message-wrapper" class="slds-modal slds-fade-in-open slds-modal---prompt">
            <div class="slds-modal__container">
                <div class="slds-modal__header slds-theme--error slds-theme--alert-texture">
                    <h2 class="slds-text-heading--medium" id="prompt-heading-id">Mail Status</h2>
                </div>
                <div class="slds-modal__content slds-p-around--medium">
                    <div>
                        <p>Email Sent Successfully to {!v.email}</p>
                    </div>
                </div>
                <div class="slds-modal__footer slds-theme--default">
                    <button class="slds-button slds-button--brand" onclick="{!c.closeMessage}">Close</button>
                </div>
            </div>
        </div>
        <div class="slds-backdrop slds-backdrop--open"></div>
    </aura:if>
   
    <div class="slds-m-around--medium">
        <div class="slds-container--medium">
            <div class="slds-form--stacked">
                <div class="slds-form-element">
                    <b> <label class="slds-form-element__label" for="CC">Email</label></b>
                    <div class="slds-form-element__control">
                        <ui:inputEmail class="slds-input" aura:id="email" value="{!v.email}" required="true" placeholder="abcd@gmail.com"/>
                    </div>
                </div>
                <div class="slds-form-element">
                    <b> <label class="slds-form-element__label" for="CC">Subject</label></b>
                    <div class="slds-form-element__control">
                        <ui:inputText class="slds-input" aura:id="subject" value="{!v.subject}" placeholder="Subject"/>
                    </div>
                </div>
                <div class="slds-form-element">
                    <b> <label class="slds-form-element__label" for="textareaSample2">Mail Body</label></b>
                    <div class="slds-form-element__control">
                        <lightning:inputRichText aura:id="body" value="{!v.body}"/>
                    </div>
                </div>
                <div class="slds-form-element">
                    <button class="slds-button slds-button--brand slds-align_absolute-center" onclick="{!c.sendMail}" style="margin-top:10px;">Send</button>
                </div>
            </div>
        </div>
    </div>
    </div>
</aura:component>

Step=>2.
             

                       EmailSendController.js


({
    sendMail: function(component, event, helper) {

        var getEmail = component.get("v.email");
        var getSubject = component.get("v.subject");
        var getbody = component.get("v.body");
       
        if ($A.util.isEmpty(getEmail) || !getEmail.includes("@")) {
            alert('Please Enter valid Email Address');
        } else {
            helper.sendHelper(component, getEmail, getSubject, getbody);
        }
    },
 
    closeMessage: function(component, event, helper) {
        component.set("v.mailStatus", false);
        component.set("v.email", null);
        component.set("v.subject", null);
        component.set("v.body", null);
    }
})


Step=>3.

            EmailSendHelper.js

({
    sendHelper: function(component, getEmail, getSubject, getbody) {
       
        var action = component.get("c.sendMailMethod"); 
        action.setParams({
            'mMail': getEmail,
            'mSubject': getSubject,
            'mbody': getbody
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var storeResponse = response.getReturnValue();
                component.set("v.mailStatus", true);
            }

        });
        $A.enqueueAction(action);
    },
})

Step=>4.

                Create Apex Class , goto File=>New=>Apex Class

                       EmailSendController.apxc

public class EmailSendController {
    @AuraEnabled
    public static void sendMailMethod(String mMail,String mSubject, String mbody){
        List<Messaging.SingleEmailMessage>mails=new List<Messaging.SingleEmailMessage>();
        // Create new Email
        Messaging.SingleEmailMessage mail=new Messaging.SingleEmailMessage();
        //set list people whow should get the email
        List<String>sendTo=new List<String>();
        sendTo.add(mMail);
        mail.setToAddresses(sendTo);
       
        // set who the email is sent from
        mail.setReplyTo('ashish28897@gmail.com'); // Change this Email id according to your Salesforce Email Id

        mail.setSenderDisplayName('Ahs IT Services'); // Change this display name according to your requirement
       
        //set Email Contents-you can use variables
        mail.setSubject(mSubject);
        mail.setHtmlBody(mbody);
       
        //add your email to the master list
        mails.add(mail);
       
        //send all email to the master list
        Messaging.sendEmail(mails);
    }

}

                                                   Output:

Thanks!

Buy me a coffee