Hello friends, In this post, we will learn about inheritance in the lightning aura component. This post will make you able to understand, how to inherit the property of any one lightning component to another lightning component. So let's get started,

Inheritance in lightning component

The lightning framework supports inheritance the same as a programming language does. For example, Apex, Java, C# and so on.In the case of the lightning components when you decorate any component attribute as extensible="true" means the component can be inherited by any other lightning component. In aura components, Inheritance allows us to use javascript functions and attributes of extensible components (parent component) in the child component.

Use case: Suppose you have many components which call the apex method from the helper function. So instead of writing the get method in all components helper function, you can create an aura component by marking it as extensible="true" and write your get method code inside the helper function once, Now you can extends this component in other components using "extends" keyword and starts calling your apex methods.

Let's understand this example with a sample code.

1. Create a base component (parent component) named "Extension" and set extensible="true".

Extension.cmp

 <aura:component extensible="true">
    <aura:attribute name="description" type="String" default="Hi, Extended Component Description" />
	<div>{!v.body}</div>
 </aura:component>
ExtensionHelper.js
 ({
    Error_MSG:'SUCCESS! \'Record fetched Successfully..!!\'',
    callApex : function(component,actionName,params,successFn,errorFn) {
        var action=component.get('c.'+actionName);
        if(!$A.util.isEmpty(params))
            action.setParams(params);
        action.setCallback(this,function(res){
            var state=res.getState();
            switch(state){
                case 'SUCCESS':
                    successFn(res.getReturnValue());
                    break;
                case 'ERROR':
                    errorFn(res.getError());
                case 'INCOMPLETE':
                    alert('ACtion seems incomplete. Something went wrong.');
                    break;
                default:
                    alert('Unknown error');
                    break;
            }
        });
        $A.enqueueAction(action);
    },
    
    showToast:function(title,type,message){
        var toastEvent = $A.get("e.force:showToast");
        if(toastEvent){
            toastEvent.setParams({"title": title,"type": type,"message": message}).fire();
        }
        else{
            alert(message);
        }
    },
 })

2. Create an apex class that holds a simple method that returns account data based on matching record id.

AccountHandler.apxc

 public class AccountHandler {
    
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccountById(string Recordid) {
        return [SELECT Id, Name, Type, Rating, Phone, Website, AnnualRevenue FROM Account WHERE Id=:Recordid];
    }
 }

3. Create another aura component(child component) named "ExtendsExtension" and set extend base component. Like extends="c:Extension".

ExtendsExtension.cmp 

 <aura:component controller="AccountHandler" extends="c:Extension" implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="msg" type="String"/>
    <aura:attribute name="output" type="String"/>
    <lightning:layout>
        <lightning:layoutItem padding="around-small">            
            <lightning:input type="text" aura:id="txtid"/>
            <br/>
            <lightning:button label="Get Account" onclick="{!c.pullAccountById}" class="slds-button slds-button_brand"/>                    
            <p>
                <b>Message from Extended Component:</b> {!v.msg}
            </p>
            <p>
                <b>Output:</b> {!v.output}
            </p>
            <p>
                <b>Description from Extended Component:</b> {!v.description}
            </p>
        </lightning:layoutItem>
    </lightning:layout>
 </aura:component>
ExtendsExtensionController.js
 ({
	pullAccountById : function(component, event, helper) {
            component.set("v.msg",helper.Error_MSG);
	    helper.makeRequest(component,helper);
	}
 })
ExtendsExtensionHelper.js
 ({
	makeRequest : function(component,helper) {        
        var params={Recordid:component.find("txtid").get("v.value")}
        helper.callApex(component,'getAccountById',params,function(response){
            component.set("v.output",JSON.stringify(response));
        },function(error){
            helper.showToast("ERROR","error",JSON.stringify(error));            
        })
	},
 })

Output:

 

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.