61 LWC Lightning Web Component Interview Questions

50 LWC Lightning Web Component Interview Questions Part 1

29. 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>

30. When to use force:recordData and when not to?
    1. force:recordData is used as a Constructor for Salesforce Aura Component which is used to either get or create a record. 
    2. force:recordData is useful when we are working with a single record and not useful for bulk records.
    3. Below is simple syntax

1. 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” />

4. For more information use this link

31. Is LWC Replacing the Aura Component?
    Ans: No, it’s not.
32. What are bound expressions and what are unbound expressions?
    1. {#expression} (Unbound Expressions)
    2. {!expression} (Bound Expressions)
    3. <c:child childAttr=”{!v.parentAttr}” />
    4. <c:child childAttr=”{#v.parentAttr}” />
    5. {#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.
    6. {!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.
    7. For more information use this link

33. 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>

34. 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.
35. Can we make a callout from Aura Component?
    Ans: Yes. We can call out that there are no such restrictions.
36. 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
37. Which interface should you use if you want to get the id of the record from the record Detail page
    Ans: force:hasRecordId
38. 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>

39. 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>

40. 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>

41. How to extend one Aura Component to another?

1. To extend the component we need to add 2 attributes to component which are extensible and abstract below is the example
2. <aura:component extensible=”true” abstract=”true” >
3. 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>

4. 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

42. What is Lightning Out?
    1. Lightning out is used to use our aura or LWC inside a vf page or outside of salesforce org.
    2. 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>

43. What are the phases in component events propagation?
    1. Capture
    2. Bubble
    3. More info here
44. What is Lightning:isUrlAddressable interface?
    1. 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.
45. How can we conditionally display content in the lightning component?
    1. Using aura:if

<aura:component>
<aura:if isTrue="{!v.truthy}">
True
<aura:set attribute="else">
False
</aura:set>
</aura:if> 
</aura:component>

46. What are List of Global value providers in lightning?
    1. $globalID
    2. $Browser
    3. $Label
    4. $Locale
    5. $Resource
47. 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.
48. How to use an external library in Aura Component?

49. 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);

50. What is the use of aura:method in lightning aura component?
    1. Aura:method is used to call the child method from the parent aura component
    2. Declaring the aura method in child component with attribute
    3. Getting the variables inside child javascript method
    4. Call method from parent component
    5. 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>