
Part – 2 | 50 LWC Lightning Web Component Interview Questions

61 LWC Lightning Web Component Interview Questions
50 LWC Lightning Web Component Interview Questions Part 1
- What is the use of lightning:recordFrom?
Lightning record form is used by Salesforce Lightning Data Service by which we can create/edit/view the single record.
Below is the example for the same:
<lightning-record-form
record-id="001XXXXXXXXXXXXXXX"
object-api-name="Account"
layout-type="Compact"
columns="1"
mode="readonly">
</lightning-record-form>
- When to use force:recordData and when not to?
- force:recordData is used as a Constructor for Salesforce Aura Component which is used to either get or create a record.
- force:recordData is useful when we are working with a single record and not useful for bulk records.
- Below is simple syntax
- Below is simple syntax
<aura:attribute name=”record” type=”Object” />
<aura:attribute name=”simpleRecord” type=”Object” />
<aura:attribute name=”recordError” type=”String” />
<force:recordData aura:id=”recordEditor”
fields=”Name,BillingCity,BillingState”
recordId=”{!v.recordId}”
targetError=”{!v.recordError}”
targetRecord=”{!v.record}”
targetFields =”{!v.simpleRecord}”
mode=”EDIT” />
- For more information use this link
- Is LWC Replacing the Aura Component?
Ans: No, it’s not. - What are bound expressions and what are unbound expressions?
- {#expression} (Unbound Expressions)
- {!expression} (Bound Expressions)
- <c:child childAttr=”{!v.parentAttr}” />
- <c:child childAttr=”{#v.parentAttr}” />
- {#v.parentAttr} is an unbound expression. Any change to the value of the childAttr attribute in c:child doesn’t affect the parentAttr attribute in c:parent and vice versa.
- {!expression} (Bound Expressions) Data updates in either component are reflected through bidirectional data binding in both components. Similarly, change handlers are triggered in both the parent and child components.
- For more information use this link
- What is the use of a design component in Aura?
Ans: Design component is used to expose the aura component attributes to lightning app builders and community builders.
<design:component label="Hello World">
<design:attribute name="subject" label="Subject" description="Name of the person you want to greet" />
<design:attribute name="greeting" label="Greeting" />
</design:component>
- What is the use of renderer in Aura?
Ans: Renderer is used to override the default rendering behaviour of any lightning aura component. For example, if you want to add the event listener for the enter key when a user puts some keyword and hits enter then it searches for account/contact or any other object. - Can we make a callout from Aura Component?
Ans: Yes. We can call out that there are no such restrictions. - Can we use Continuation in Aura Components?
Ans: Yes. We can use it and the process is the same. Here is the link for the same - Which interface should you use if you want to get the id of the record from the record Detail page
Ans: force:hasRecordId - How to get the recordId and Object API name inside an aura component if the component is being used inside a record detail page?
Ans: implement force:hasRecord & force:hasSobjectName interface in the aura component
<aura:component implements="force:hasRecordId,force:hassObjectName" access="global" >
{v.recordId}
{v.sObjectName}
</aura:component>
- Which interface should you use if you want to override a standard action?
Ans:
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride" access="global" >
Override Quick Action
</aura:component>
- Which interface should you use if you want your component to be used as a tab?
force:appHottable
<aura:component implements="force:appHottable,flexipage:availableForRecordHome,force:hasRecordId,lightning:actionOverride" access="global" >
Custom TAB LWC
</aura:component>
- How to extend one Aura Component to another?
- To extend the component we need to add 2 attributes to component which are extensible and abstract below is the example
- <aura:component extensible=”true” abstract=”true” >
- Code for Parent Component
<aura:component extensible=”true” abstract=”true” controller=”ObjectPanelController”>
<aura:attribute name=”sObjectType” type=”String” required=”true” />
<aura:attribute name=”maxRows” type=”Integer” default=”20″ />
<aura:attribute name=”fields” type=”String” />
<aura:attribute name=”records” type=”Object[]” />
<aura:attribute name=”sObjectInfo” type=”Object” />
<h2>{!v.sObjectInfo.Label}</h2>
<div>{!v.body}</div>
</aura:component>
- Code for child Component
<aura:component extends=“c:objectPanel”>
<aura:attribute name=”showAccountWarning” type=”Boolean” default=”true” />
<aura:set attribute=”sObjectType” value=”Account” />
<aura:set attribute=”fields” value=”AccountNumber,Website” />
<aura:iteration items=”{!v.records}” var=”rec”>
<div>
<a onclick=”{!c.deleteRecord}”>Del</a> |
<a onclick=”{!c.navigateToRecord}”><ui:outputText value=”{!rec.Name}”/></a>
<ui:outputText value=”{!rec.AccountNumber}” />
<ui:outputURL value=”{!rec.Website}” />
<aura:renderIf isTrue=”{!and(v.showAccountWarning, rec.Is_Red__c)}”>
<span class=”warn”>WARNING: Red Account</span>
</aura:renderIf>
</div>
</aura:iteration>
</aura:component>
50 LWC Lightning Web Component Interview Questions Part 1
- What is Lightning Out?
- Lightning out is used to use our aura or LWC inside a vf page or outside of salesforce org.
- Lightning out is used in lightning aura application.
//Component Code
<!--SampleComponent.cmp-->
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">
<!--Declare Attributes-->
<aura:attribute name="vfMsgMethod" type="object" description="this attribute is for visualforce page javascript method"/>
</aura:component>
- What are the phases in component events propagation?
- Capture
- Bubble
- More info here
- What is Lightning:isUrlAddressable interface?
- To enable direct navigation to a Lightning component via URL, add the lightning:isUrlAddressable interface to the component. This interface is used with the lightning:navigation component to navigate from one component to the URL-addressable component.
- How can we conditionally display content in the lightning component?
- Using aura:if
<aura:component>
<aura:if isTrue="{!v.truthy}">
True
<aura:set attribute="else">
False
</aura:set>
</aura:if>
</aura:component>
- What are List of Global value providers in lightning?
- $globalID
- $Browser
- $Label
- $Locale
- $Resource
- What is the use of $A.enueueAction ?
Ans: $A.enueueAction is used to place the apex call in a queue from Lightning Aura Component so that it can make the call to Apex Class and return the data from salesforce method. - How to use an external library in Aura Component?
- How to make a method cacheable from JavaScript Side?
var action = component.get("c.getListOfItem");
action.setStorable();
action.setCallback(this, function(response) {
// handle response
};
$A.enqueueAction(action);
- What is the use of aura:method in lightning aura component?
- Aura:method is used to call the child method from the parent aura component
- Declaring the aura method in child component with attribute
- Getting the variables inside child javascript method
- Call method from parent component
- JavaScript of Parent Component
//Declaring the aura method in child component with attribute
<aura:method name="sampleMethod" action="{!c.doAction}" description="Sample method with parameters">
<aura:attribute name="param1" type="String" default="parameter 1"/>
<aura:attribute name="param2" type="Object" />
</aura:method>
//Getting the variables inside child javascript method
({
doAction : function(cmp, event) {
var params = event.getParam('arguments');
if (params) {
var param1 = params.param1;
}
}
//Call method from parent component
<!--Parent cmp-->
<aura:component>
<div class="slds-m-around_xx-large">
<!-- Add Child Component -->
<c:ChildComponent aura:id="childCmp"/>
<!-- On button click child aura:method will be called-->
<lightning:button variant="brand" label="Call Child" onclick="{!c.callAuraMethod}" />
</div>
</aura:component>