61 LWC Lightning Web Component Interview Questi ons | Salesforce

Lightning Interview Questi ons and Answers

61 Scenario based Salesforce LWC Lightning Web Components
interview questi ons with detailed answers by the professional at CRS
Info Soluti ons

1. Can we call the @AuraEnabled function in the apex class using wire ?
Ans: Function also needs to have cacheable = true annotation ie should be like
@AuraEnabled(cacheable = true)
2. What do you mean by cacheable = true annotations ?
Ans: First of all when you mark function as cacheable = true it can only retrieve
data i.e. it cant have any DML.
It is used to improve component performance by quickly showing cached data
from client side storage without waiting for server trip.
Remember to refresh the stale data provisioned by Apex we have to use
refreshApex as LDS doesn’t manage data coming from Apex ( In case of wired
service)
3. @wire(getBoats,{boatTypeId : this.boatTypeId})
getBoats(error,data){}
Will the above code deploy? (Assuming all variables and apex class function
exists).
Ans: No it wont when passing a variable in wire you should always use $ along
with variable, it should be written like
@wire(getBoats,{boatTypeId : ‘$boatTypeId})
4. Why do we use $ when passing property in wire function, what does it
mean? [Latest Salesforce lightning interview questions and answeres]
Ans: $ prefix tells the wire service to treat values passed as a property of the
class and evaluate it as this.propertyName and the property is reactive. If the
property’s value changes, new data is provisioned and the component renders.
5. See the below code and answer the following question: [Scenario based
Salesforce Lightning Interview question with relevant answer]
If I want to refresh the wired data in the above function, can I call
refreshApex(this.someVar) ?
@wire(getBoats,{boatTypeId : ‘$boatTypeId’})
getBoats({error,data}){
if(data){
this.someVar = data;
this.error = undefined;
}
else if(error){
this.error = error;
this.someVar = undefined ;
}
}
Ans:
No we cant call refreshApex(this.someVar) rather refreshApex is called on whole
result provisioned from the wire service not just the data part, we will have to
rewrite it as below :
@wire(getBoats,{boatTypeId : ‘$boatTypeId’})
getBoats(result){
this.mainResult = result;
if(result.data){
this.someVar = result.data;
this.error = undefined;
}
else if(result.error){
this.error = result.error;
this.someVar = undefined ;
}
}
Now we can refresh data as refreshApex(this.mainResult)
6. Can we call a wire function inside a javascript function like below :
searchBoats(event){
@wire(getBoats,{boatTypeId: ‘$boatTypeId’}
getBoats(data,error){
}
}
Assume searchBoats is being called on click of button? Will I be able to deploy the
code ?
Ans: No you cant call it like this , code will not deploy. You will receive error as
leading decorators must be attached to class which means decorators like wire
can be directly under class only not inside any other function.
Similarly if you try to define variable with @track or api decorator inside a
function it will fail.
7. When is the wire method/property called in the lifecycle of a
component ?
Ans: Wired service is called right after component is created ie after constructor
and is again called when parameter that you are passing is made available.
8. What are lifecycle hooks in LWC ?
Ans: A lifecycle hook is a callback method triggered at a specific phase of a
component instance’s lifecycle.
There are following hooks supported in LWC :
Constructor : Called when the component is created.
Connectedcallback : Called when the element is inserted into a document. This
hook flows from parent to child.
RenderedCallback : Called after every render of the component. This lifecycle hook
is specific to Lightning Web Components, it isn’t from the HTML custom elements
specification. This hook flows from child to parent. Ie its not part of HTMLElement
rather defined in LightningElement.
Disconnectedcallback : Called when the element is removed from a document.
This hook flows from parent to child.
Errorcallback : Called when a descendant component throws an error. The error
argument is a JavaScript native error object, and the stack argument is a string.
This lifecycle hook is specific to Lightning Web Components, it isn’t from the HTML
custom elements specification
9. Is wire method called multiple times during lifecycle of component ? (True /
False)
Ans: True
10.What is the difference in below two codes , will they both compile ? Give
same results ?
11.[tricky Salesforce Lightning Interview question with relevant answer]
Code 1 :
@wire(getBoats)
getBoats({data,error}){
if(data)
console.log(‘print here’);
Else if(error)
console.log(‘print in else’);
}
@wire(getBoats,{})
getBoats({error,data}){
if(data)
console.log(‘print here’);
Else if(error)
console.log(‘print in else’);
}
Ans: Both will compile they are same.

Is it mandatory to use data,error only in wired method, can I use some other
variable like below : Scenario based interview question with answers

@wire(getBoats)
getBoats({myData,myError}){
if(mydata)
console.log(‘i am in data’);
else if(myError)
console.log(‘I am in error’);
}
Will the code deploy successfully or I will receive an error ?
Salesforce Lightning LWC interview questions and answers
Ans: We cant use any other variable name other than data, error they are
hardcoded in wire service. Code will successfully deploy but wire service wont be
able to fetch any data.
10.What is the difference between event.StopPropogation() and
Event.preventDefault()?
Ans: stopPropagation prevents further propagation of the current event in the
capturing and bubbling phases. preventDefault prevents the default action the
browser makes on that event.
10.If we add required attribute in lightning-input , will I get an error on leaving
the field empty ?
Ans: No unless you also add logic in backend javascript file to actually throw an
error using checkValidity and reportValidity.
11.Are quick actions supported for LWC components ?
Ans: Quick actions are supported by LWC in Summer 21 or later orgs. LWC
quick actions are only supported on record pages.
12.How can i reference record ID of page in my component which is fired from
quick action.
Ans: There are two types of quick actions in LWC :
Screen actions : Normal action which open a modal
Headless actions : Which dont have any html file rather just logic written in js
ie no modal window will come up
In case of screen actions we will be able to get recordID by just defining
recordID as public property in the component.
For headless action you have to define @api invoke method which is auto
called and recordID will be set after this function is called.
10.What is a promise in async transactions? What are it different stages. [Latest
Salesforce lightning interview questions and answers]
Ans:
Promise is object returned in async transaction which notifies you about
completion or failure of transaction.
For example when you call apex imperatively it returns you a promise object
on the basis of object returned execution either goes into (then) ie transaction
was successful or (catch) which means transaction failed.

Stages of promises are :

Pending: Waiting for result.
Fulfilled: Promise results in success.
Rejected: Promise result in failure.
10.What is the difference between Promise and Promise.all
Promise.All takes in multiple promises in it and returns a single promise object.
Promise.all is used when I want to make sure once all promises are resolved
then only execute then block.
10.What are web components, Is LWC based on web components ?
Ans: In simplest language , web components can be explained as it allows you
to create and re-use custom components as html tags in a component with
their functionality encapsulated from rest of your code.
Web components has 4 pillars which make it so amazing.
HTML Template : user defined templates which are rendered until called upon.
Custom Elements : With this we can embed as components merely as html
tags in our template.
Shadow DOM : With this we can separate DOM of each custom element from
each other to make sure nothing from any components leaks into each other.
HTML Imports : You can import other html documents in another html
document for example we can import multiple templates into one component
then use render function to display a template.
Yes LWC is based on web components
If you look at LWC architecture Salesforce only adds security , LDS and base
components rest is based on web components and es 7.
10.Why do we extend LightningElement ?
Ans: LightningElement is custom wrapper on HTMLElement which actually
contains all the lifecycle hooks methods over which Salesforce did some
customization.
11.When we create new component why does it say export default
ComponentName ?
Ans: Because of export default component only we are able to embed one
component into another
12.How do I retrieve elements on the basis of ID?
Ans: We should never use “id” in lwc as id that you will define in LWC may get
transformed into something entirely different on rendering, rather use data-id
in your tags to reference them.
13.How to send data from Parent to Child in LWC ?
Ans: For parent to child communication you just need to expose your function
or attribute as @api then in your parent component you can use querySelector
to actually query the child component access exposed attribute or method
14.If we parent component A and there are two component B and C as child
components. How can we communicate between B and C ?
Ans: We should fire up event from child component B to parent A then from A
call attribute / function exposed (as @api) and pass data into C component.
15.What does composed = true does in an event ?
Ans: These type of events can bubble up inside dom and also able to cross
shadow boundary.
16.When you fire an event, can i capture it in same template/ component ?
Ans: No
17.Is bubble : false and composed : true possible in an event ?
Ans: No
18.What is the difference between below :
a. Bubble : false and composed : false
b. Bubble : true and composed : true
c. Bubble : true and composed : false
19.What are callback functions in LWC ?
Ans: Callback functions are nothing but functions passed as parameter into
other functions.
20.Are callback functions synchronous or asynchronous ?
Ans: Functions are neither async or sync in themselves rather depend on
where are they being passed for example if a function in passed into reduce
method is sync but if function is being passed into setTimeout function its
async.
21.What is callback hell ?
Ans: In most simple words callback hell occurs when there are many functions you
want to call async and you end up puting them one side each another and as the
code grows it becomes very difficult to read for example :

getData(function(x)
{
getMoreData(x, function(y)
{
getMoreData(y, function(z)
{ ... }
);
});
});
10.What are decorators in LWC (Lightning web components) in Salesforce?
Latest interview question.
 Ans: The Lightning Web Components programming model has three
decorators that add functionality to a property or function. There are 3
decorators for LWC
@track , @wire, @api
10.When do I use @track on a property ? Do I still need it considering all
properties are by default reactive now?
Ans: After Spring 20 all the properties are made by default reactive ie we dont
need @track for primitive properties. We still need it for array or object type
properties
11.Can I use multiple decorators on one property ?
Ans: No we cant use multiple decorators on same property.
12.Can I deploy component with empty css file ?
Ans: No we cant do that
13.What is difference between var and let in JS ?
Ans: In simple words difference is var is function scoped while let is block
scoped
Var allows you to redeclare same variable while let will throw an error
Var variables are hoisted that is you can access them even before they are
declared in code its just they will return undefined value while with let it will
throw an error.
14.Is there any difference in how we add LWC component inside another LWC
component and inside AURA component ?
Ans: Difference is how they are added in the component.
LWC follows kebab case ie if you are adding any LWC component inside
 another component you will have to add in kebab case form while in AURA it
will be added without kebab case for example :
We have component with name “childLWCComponent”
In LWC it will be added as <c-child-l-w-c-component/>
In Aura it will be added as <c:childLWCComponent/>
15.What is LMS ?
Ans: LMS is defined as the standard publish-subscribe library that enables
communication with DOM across the components be it Visualforce Pages, Aura
components, and Lightning Web Components (LWC) all can use it to publish
message and listen to messages published by others.
16.Do we have application events in LWC?
Ans: We dont have application event as such in LWC like Aura rather we have
LMS in LWC to communicate between components which are not part of same
hierarchy
17.How can we navigate user from LWC component to record detail page?
Ans: Can be done using NavigationMixin service
18.Do we have force:createRecord equivalent in LWC?
Ans: Using navigation mixin only you can also create new record where you
define object , action as new and pass any default values you want to set.
19.What is render() , is it part of lifecycle hook? Why do we use it ?
Ans: Render is not part of lifecycle hook its a protected function, we only use it
if we have imported multiple templates in our component and we want to
render particular template on meeting certain criteria.
20.Can I get current user ID in LWC without apex?
Ans: Yes we can get current user ID without apex by simply importing
import Id from ‘@salesforce/user/Id’
21.What is difference between ‘==’ and ‘===’ ?
Ans: Both are used to compare two variables but == doesnt take data type into
consideration and does type coercion ie interpreter tries to automatically
convert data types to match the values while in === case if data type is not
same it will always return false.
For example :
2==”2” will return True (Type coercion happens)
2===”2” will return False ( No Type coercion)
22.What is String interpolation ? [important interview questions and Salesforce
Lightning]
Ans: It means simply when string literal is evaluated all the placeholders added
into it are calculated at run time and replaced in string with values. Place
holder can be anything a variable , expression even a function call. In javascript
its performed using (backtick).
For example:
const greeting = 'Hello';
const who = 'World';

const message = ${greeting}, ${who}!`;

message; // => ‘Hello, World!’
23.What are template literals ? What is the use?
Ans: In javascript string interpolation is performed using template literals.
Template literals are created using (`) backtick character apart from string
interpolation they also are used for adding multi-line strings without having to
use “\n”
For example :
console.log('string text line 1\n' +
'string text line 2');
console.log(`string text line 1
string text line 2`);
//Both will result in same output
10.Can i call function annotated with @AuraEnabled(cacheable= true)
imperatively ?
Ans: Yes
11.Can we do DML in method annotated with @AuraEnabled(cacheable=
true)?
Ans: No we cant do DML inside any method annotated with cacheable = true ,
you will receive an error as DMLLimit Exception.
12.How to refresh cache when calling method imperatively ?
Ans: We have to use getRecordNotifyChange(RecordIds) which refreshes the
LDS cache providing you the latest data this will work only if cacheable = true
was there.
Otherwise we will have to call the function again from our js to get the latest
data.
10.When do we face error of “Cant assign to Read only property” in LWC?
Ans: This error usually occurs when you are trying to make changes to a
 property which is marked as @api , ideally you should clone the value then
make the changes to it.
11.How can I evaluate expression in situation like <template if:true =
{someVariable % 7==0}
Ans: We cant add expressions directly in html file rather what we can do is
create getter which will evaluate value for us which we can use in html like
below :
get isMod7() { return this.index % 7 == 0; }
<template if:true ={isMod7}
10.Why do we put constants outside of class in LWC?
Ans: We cant put constants inside a class or function in javascript its illegal for
example below piece of code will throw you an error
export default class someClass extends LightningElement {
const someVar = ‘someValue’ ;
}
10.How to query all lightning-input , combobox, radio buttons using one
querySelector or do I have to use multiple ?
Ans: We can query all of them using one query selector only no need to write
multiple for each tag. We can pass all tags (,) separated to query all.
const allValid = […this.template.querySelectorAll(‘lightning-input,lightning-
combobox,lightning-radio-group’)];
If you are wondering why are we using (…) spread operator before
querySelectorAll its because querySelector returns you the nodelist and using
spread operator we convert it to array of items otherwise we wouldnt be able to
use array functions like map or reduce.
10.What is reduce method in JS ?
Reduce method calls the reducer function (callback function) for each item of the
array to reduce the whole array into single value.
Remember it doesnt change the actual array
Remember it doesnt change the actual array.
array.reduce((accumulator , currentVal , currentIndex , array)=>{
},0)
As the name suggests accumulator collects all the value
currentVal - denotes the current val of array
currentIndex - denotes the index of current val of array [optional]
Array - array object being passed. [optional]
Remember : If default value is passed accumulator is set to default value and
index starts with 0 , if no default value is passes accumulator is assigned 0th index
value and currentIndex starts from 1.
10.What would be the output of : 1+3+”4” ?
//A 44 because type coercion will take place.
statu
get statusVal(){
return statusVal ;
}
set statusVal(value){
this.statusVal = value;
}
renderedCallback(){
this.statusVal = ‘ABC’
}
Ans: Yes you will receive an error “Maximum depth exceeded” as in set function
you are again setting statusVal itself which means it will keep on setting itself
(infinitely).

1. What are the type of events into Salesforce Lightning component

1. Application Event(Salesforce Document)
2. Component Event
 3. System Event(Salesforce Document)
2. What is the basic difference between Application Event and Component
Event
1. The major difference between application and component event is
that component event is used in child to parent components and
application event can be used throughout the application.
3. Which interface needs to be implemented so that you can use lightning
components as quick action.
1. force:lightningQuickAction
4. Which interface needs to be implemented so that you can use the lightning
component as Tab like custom object and VF page.
1. force:appHostable
5.
1. Can we use Lightning Components in the VF page?
1. Yes, using lightning out functionality of the salesforce lightning
component.
2. How can we call the child component controller method from the parent
component controller method?
1. Yes, we can call using aura methods.
2. Salesforce Document
3. What are the different Lightning component bundles?
1. Component
2. Controller
3. Helper
 4. Style
5. Document
6. Design
7. SVG
8. Renderer
9. More Info Here(Salesforce Document)
Salesforce lightning interview questions Set 1
1. What is the use of Document and Renderer in lightning components?
1. Document: – A description, sample code, and one or multiple
references to example components
2. Client-side renderer to override default rendering for a component.
2. How to ensure FLS while working with Lightning Component?
1. Lightning Data Services already ensures Field Level Security and we
can also use into the Apex using isAccessible, isCreateable,
isDeleteable, isCreateable and etc methods of Schema class.
3. Can we use fieldSet in the lightning component?
1. Yes. We can use Lightning:RecordForm and provide the list of the
Fields in fields attribute. For more information Refer Here
4. How to navigate from one component to another component.
1. We can use force:navigateToComponent
2. OR we can use lightning:navigation
5. Can we use PageReference in Lightning Component?
1. Yes
6. How to call the Parent Component method from the child component
without using events?
1. Yes. By using aura:action but the recommended way is to use
Component Event
7. Can we use LWC inside Aura?
1. Yes. We can use
8. Can we use Aura Inside LWC?
1. No. We can only use LWC inside Aura but not vice versa
9. Is Lightning an MVC framework ?
1. No, it’s a component-based framework.
10.Which parts of Lightning Components are server-side and which are client-
side ?
1. Lightning Components use JavaScript on the client side and Apex on
the server side.
11.Is there any limit on how many components to have in one Application ?
1. No
12.Is Lightning Components replacing Visualforce ?
1. No
13.What is Aura? Why do we use the aura: namespace in the code ?
1. Aura is the open source technology that powers Lightning
Components. The aura: namespace contains all of the basic building
blocks for defining components and applications.
14.What is the difference between Visualforce Components and Lightning
Components ?
 1. Visualforce components are page-centric and most of the work is
done on the server. Lightning is designed from the component up,
rather than having the concept of a page as its fundamental unit.
Lightning Components are client-side centric, which makes them
more dynamic and mobile friendly.
15.Can we integrate Lightning components with another framework, such as
Angular?
1. Yes. we can include the working 3rd party code inside a Visualforce
Page, embed the Visualforce Page inside a Lightning Component.
This Lightning Component can be used as any other Lightning
Component in various environments.
16.What is use of @AuraEnabled annotation
1. @AuraEnabled method is used to make any Apex Method for either
Aura or LWC Component. @AuraEnabled Method must be static in
nature.
17.What If I try to make any DML inside a method which is having
@AuraEnabled(cacheable=true)?
1. If you try to make a DML inside the method then you will read only
errors. cacheable=true makes the method read only.
18.How to Create a Component Dynamically?
1. Use $A.createComponent for creating the dynamic component see
below code snippet.
2. Component Code
<!--c:createComponent-->
<aura:component>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<p>Dynamically created button</p>
{!v.body}
</aura:component>
JS Code
/*createComponentController.js*/
({
doInit : function(cmp) {
$A.createComponent(
"lightning:button",
{
"aura:id": "findableAuraId",
"label": "Press Me",
"onclick": cmp.getReference("c.handlePress")
},
function(newButton, status, errorMessage){
//Add the new button to the body array
if (status === "SUCCESS") {
var body = cmp.get("v.body");
body.push(newButton);
cmp.set("v.body", body);
}
else if (status === "INCOMPLETE") {
console.log("No response from server or client is offline.")
// Show offline error
}
else if (status === "ERROR") {
console.log("Error: " + errorMessage);
// Show error message
}
}
);
},
handlePress : function(cmp) {
// Find the button by the aura:id value
console.log("button: " + cmp.find("findableAuraId"));
console.log("button pressed");
}
})
27.Can we navigate to one component from another component?
1. Yes. we can navigate for this we can use lightning:navigation.
2. Below is the code for the same
({
doInit : function(component, event, helper) {
},
navigate : function(component, event, helper) {
var nagigateLightning = component.find('navigate');
var pageReference = {
type: 'standard__objectPage',
attributes: {
objectApiName: 'Account',
actionName: 'list'
},
state: {
filterName: 'MyAccounts'
}
};
nagigateLightning.navigate(pageReference);
}
})
28.Which Interface is used to make a component available inside Salesforce
Digital Experience?
Ans: forceCommunity:availableForAllPageTypes
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:acti
onOverride" 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:hasRec
ordId,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>