Sfdc-lightning.com(A Blog On Salesforce): Salesforce Lightning Interview Questions

Aura Component Interview Questions.

1) What is Lightning Component Framework and What is Aura Framework?

Lightning Component framework is a UI framework for developing single page applications for mobile and desktop devices.

·       It uses JavaScript on the client side and Apex on the server side.

·       Lightning Component framework makes developing apps that work on both mobile and desktop devices far simpler than many other frameworks.

·       Lightning component Framework is based on Aura Framework.

·       Aura Framework is design by Salesforce which is open source framework for creating ui components.

2) What is Lightning App Builder?

Lightning app builder is used to create lightning pages for Salesforce Lightning experience and mobile apps.The Lightning App Builder is a point-and-click tool.Lightning Pages are built using Lightning components which are compact, configurable, and reusable elements that you can drag and drop into regions of the page in the Lightning App Builder.

We can create different types of pages using lightning app builder,

1)App Page

2)Home Page

3)Record Page

#aura components interview questions#lightning aura components interview questions#salesforce lightning interview questions and answers#lightning interview questions in salesforce#sfdc lightning interview questions#lightning interview questions and answers

3) What is the use of $A.enqueueAction(action) and how to call server side action from client side?

$A.enqueueAction(action ) adds the server-side controller action to the queue of actions to be executed.The actions are asynchronous and have callbacks.

For more details visit==>Calling a Server-Side Action

#lightning salesforce interview questions#lightning interview questions for experienced#lightning components interview questions#lightning interview questions salesforce#interview questions on lightning salesforce#salesforce lightning aura components interview questions

4) What is Value provider and What is action provider in Salesforce Lightning component?

Value provider is a way to access data,with value provider "v" we can fetch value of attribute from component markup in javascript controller.Value provider is denoted with v(view) and action provider is denoted with "c "(controller).

Value provider:

This value provider enable us to access value of component attribute in component markup and javascript controller.

<aura:component>

<aura:attribute type="string" name="myfirstattribute" default="first text"/>

{!v.myfirstattribute}

</aura:component>

Action provider:

This enable us to handle actions,event,handlers for the component.

Ex:<aura:handler name="init" value="{!this}" action="{!c.doinit}"/>

In Javascript controller,

({

doinit:function(component, event, helper) {

// some operations here

}

})

#salesforce lightning component interview questions#salesforce lightning questions#interview questions on lightning aura components#salesforce lightning interview questions and answers for experienced#salesforce interview questions lightning#salesforce aura interview questions#lightning aura interview questions

5) What are Attributes in Salesforce Lightning component?

Attributes act like a variable to store different types of values.

For more details visit==>Basic Attributes type in Salesforce Lightning

6) What are collection types in Salesforce Lightning component?

1)Array

2)List

3)Map

4)Set

For more details visit==>Collection types in Salesforce Lightning

7) What is the use of interface force:hasRecordId and flexipage:availableForAllPageTypes in Salesforce Lightning component?

By using force:hasRecordId interface in lightning component we can assigned the id of the current record to lightning component. This interface adds an attribute named "recordId" to the component. The type of attribute is string and has 18-character Salesforce record ID.

To make our component available for record page and any other type of page, we need to implement the interface flexipage:availableForAllPageTypes

For more details visit==>force:hasRecordId and flexipage:availableForAllPageTypes interface

8) What is the use of interface Lightning:actionOverride in Salesforce Lightning component?

Lightning:actionOverride interface Enables a component to be used as an override for a standard action. We can override the View,New, Edit, and Tab standard actions on most standard and all custom components. The component needs to implement the interface Lightning:actionOverride after which the component appear in the Lightning Component Bundle menu of an object action Override Properties panel.

For more details visit==>Lightning:actionOverride

9) What is the use of interface flexipage:availableForRecordHome in Salesforce Lightning component?

Interface flexipage:availableForRecordHome make the component available for record pages only.

For more details visit==>flexipage:availableForRecordHome

10) What is the use of interface force:appHostable in Salesforce Lightning component?

Interface force:appHostable in component allow it to be used as a custom tab in Lightning Experience or the Salesforce mobile app.

For more details visit==>force:appHostable

11) What is the difference between force:lightningQuickAction and force:lightningQuickActionWithoutHeader in Salesforce Lightning component?

Interface force:lightningQuickAction allow the component to be used as a custom action in Lightning Experience or the Salesforce mobile app. Implementing the force:lightningQuickAction in a component, component interface display in a panel with standard action controls, such as a Cancel button.

Interface force:lightningQuickActionWithoutHeader allow the component to be used as a custom action in Lightning Experience or the Salesforce mobile app. Implementing the force:lightningQuickAction in a component, component interface display in a panel without standard action controls like cancel button.

For more details visit==>force:lightningQuickAction and force:lightningQuickActionWithoutHeader

12) What is the use of aura:handler init event in Salesforce Lightning component?

This is also called as the constructor of lightning component. The init event is called once the component construction is over. As an example if I am creating a simple registration page and I want to display some default text value after page load in my input boxes I can do this by calling the javascript controller method and setting some default value in the attributes.

Basic Syntax:

<aura:handler name="init" value="{!this}" action="{!c.doinit}"/>

For more details visit==>Init Event in Salesforce Lightning

13) What is the use of aura:handler change event in the Salesforce Lightning component?

The change event is called when the value in one of the attribute changes.

As an Example If i am having attribute " Anyname", on change of attribute "Anyname" if I want to call javascript method i can do this as:

Syntax:

<aura:attribute name="Anyname" type="String" />

<aura:handler name="change" value="{!v.Anyname}" action="{!c.doinit}"/>

For more details visit==>Change Event in Salesforce Lightning

14) What is component event in Salesforce Lightning component?

Component Events are fired by the child components and handled by the parent component.

We require parent child relationship between two components if we want to use component event between them for communication.

For more details visit==>Component event in Lightning

15) What is application event in Salesforce Lightning component?

Application event are the event handle by any component no matter what relationship between them but they should be inside single application.

For more details visit==>Application event in Lightning Component

16) What is the main advantage of using Component event over application events?

We should always use Component Events whenever possible this is because Component events can only be handled by parent components so the components in picture are only those components which need to know about them.

17) Explain Bound and Unbound expressions in Salesforce Lightning component?

We have two types of expression Bound expression and Unbound expression which we use to perform data binding in lightning components.

Let see two example:

<c:ChildComp childAttributeName="{!v.parentAttributeName}" /> 

childAttributeName="{!v.parentAttributeName}" is a bound expression. Any change to the value of the childAttributeName attribute in child component also changes the value of parentAttributeName attribute in parent component and vice versa.

<c:ChildComp childAttributeName="{#v.parentAttributeName}" /> 

childAttributeName="{#v.parentAttributeName}" is a Unbound expression. Any change to the value of the childAttributeName attribute in child component has no effect on the value of parentAttributeName attribute in parent component and vice versa.

For more details visit==>Bound expression and Unbound expression

18) What is Aura:method in Salesforce Lightning component?

we can directly call a child component controller method from the parent component controller method using Aura:method. This method is used to pass value from parent component controller to the child component controller.

For more details visit==>Aura:method in lightning component

19) What is Lightning:overlayLibrary in Salesforce Lightning component?

To create a modal box we use Lightning:overlayLibrary.To use Lightning:overlayLibrary in component we need to include tag <lightning:overlayLibrary aura:id="overlayLib"/> in component, here aura:id is unique local id. Modal has header,body and footer which are customizable.

For more details visit==>Lightning:overlayLibrary

20) What is lightning:navigation in Salesforce Lightning component?

Lightning:navigation is used to navigate to a given pageReference.

Following are the supported type where we can navigate,

Lightning Component

Knowledge Article

Named Page

Navigation Item Page

Object Page

Record Page

Record Relationship Page

Web Page

For more details visit==>Lightning:navigation

21) Explain Lightning:recordForm in Salesforce Lightning component?

Using lightning:recordForm we can create forms to add, view, or update a record. The field-level security and sharing are taken into consideration by this component so user will only see the data they have access to.

For more details visit==>Lightning:recordForm

22) Explain Lightning:recordEditForm in Salesforce Lightning component?

We use lightning:inputField inside the lightning:recordEditForm to create editable fields.We can use lightning:outputField as well to display read-only information. The field-level security and sharing are taken into consideration by this component so user will only see the data they have access to. lightning:recordEditForm supports the below features:

Display a record edit layout for editing a specified record.

Display a record create layout for creating a new record.

For more details visit==>Lightning:recordEditForm

23) Explain Lightning:recordViewForm in Salesforce Lightning component ?

Lightning:recordViewForm use lightning:outputField and is used to display
information related to that record. The field-level security and sharing are taken into consideration by this component so user will only see the data they have access to.

For more details visit==>Lightning:recordViewForm

24) Explain Standard controller of lightning component (force:recordData)?

Lightning Data Service (LDS) act as the data layer for Lightning.

If we are not using LDS, every component within our app makes independent calls to the server to perform operations on a record, even if all components within our app are dealing with same record data. These are independent server calls which reduces performance.LDS identifies and eliminates requests that involve the same record data, sending a single shared data request that updates all relevant components, it also provides a way to cache data to work offline in case the user gets disconnected, intelligently syncing the data once the connection is restored.If we have a Lightning application that creates, reads, updates, or deletes records, LDS is the best, most efficient way to do CRUD operations.

For more details visit==>Standard controller of lightning component (force:recordData)

25) What are the method available with force:recordData and What are the supported mode?

saveRecord() // It insert or update the loaded record.

deleteRecord() // It deletes the loaded record.

getNewRecord() // It loads a new record template that performs an insert when data is saved.

reloadRecord() // It reruns the loading code to overwrite the current targetRecord with the current attribute values.

mode can be either EDIT or VIEW.(View for displaying records, edit for creating or updating records)

26) Which mode we need to use to save record using force:recordData?

mode="EDIT"

For more details visit==>Saving a record using LDS (force:recordData)

27) Which mode we need to use to create record using force:recordData??

mode="EDIT"

For more details visit==>Create a record using LDS (force:recordData)

28) Explain parameters used with force:recordData in the below syntax ?

<force:recordData aura:id="someId"

recordId="{!v.recordId}"
layoutType="{!v.layout}"
fields="{!v.fieldsToQuery}"
mode="VIEW"
targetRecord="{!v.record}"
targetFields="{!v.simpleRecord}"
targetError="{!v.error}"
/>

recordId specify the record on which processing needs to be done.
mode can be either EDIT or VIEW.(View for displaying records, edit for creating or updating records)
layoutType specifies the layout (FULL or COMPACT).
fields specifies which fields in the record to query.
target attributes are attributes that force:recordData populates itself.

1) targetRecord is populated with the loaded record
2) targetFields is populated with the simplified view of the loaded record
3) targetError is populated with any errors

29) What parameter we use with force:recordData to handle record changes?

recordUpdated.

Sample syntax:

<force:recordData aura:id="forceRecordDataCmp"
recordId="{!v.recordId}"
layoutType="{!v.layout}"
targetRecord="{!v.recordObject}"
targetFields="{!v.recordFieldstoQuery}"
targetError="{!v.recordError}"

recordUpdated="{!c.recordUpdated}" />

For every force:recordData component referencing the updated record, LDS does two things.

LDS notifies all other instances of force:recordData of the change by firing the recordUpdated event with the appropriate changeType and changedFields value.
It sets the targetRecord and targetFields attribute on each force:recordData to the new record value. If targetRecord or targetFields is referenced by any UI, this automatically triggers a rerender so that the UI displays the latest data.

Note: If force:recordData is in EDIT mode, targetRecord and targetFields are not automatically updated.

30) What is Lightning out ?

Lightning out is a feature by which we can use our lightning component inside of an external site. One of the best advantage is we can use our lightning component inside visualforce page.

For more details visit==>Lightning out in Salesforce

31) What is force:createRecord and what is the main advantage?

force:createRecord is an event that opens a page to create a record for specific entity.

Sample syntax:

createRecord : function (component, event, helper) {

var createRecordEvent = $A.get("e.force:createRecord");

createRecordEvent.setParams({

"entityApiName": "ObjectApiName"

});

createRecordEvent.fire();

}

The main advantage is defaultFieldValues attribute inside setParams let us auto populate value on fields inside record form.

recordEvent.setParams({

"entityApiName": "Account",

"defaultFieldValues":{

"Industry":"Apparel"

}

});

For more details visit==>force:createRecord in lightning

32) Explain force:editRecord event?

This event opens the record page specified by recordId to edit.

Syntax:

var editRecordEvent = $A.get("e.force:editRecord");

editRecordEvent.setParams({

"recordId": component.get("v.recordId")

});

editRecordEvent.fire();

For more details visit==>force:editRecord in lightning

33) What is Lightning:datatable in Salesforce Lightning component?

Lightning datatable is a table that displays columns of data, formatted according to type.

Important attributes includes data, columns, and keyField attributes.The keyField attribute is required for correct table behavior. It associates each row with a unique identifier.

For more details visit==>Lightning:datatable in Salesforce

34) To form a container around a information related to single item or group of item what we need to use in lightning component?

Lightning:card.

For more details visit==>Lightning:card

35) On load of lightning component you are required to execute some action what you will do to achieve this?

We will use "Init" Event which is also called as the constructor of lightning component.The init event is called once the component construction is over.

Basic Syntax:

<aura:handler name="init" value="{!this}" action="{!c.doinit}"/>

36) you are asked to execute some action when value change is detected in one of the attribute what will you do?

We will use "change" Event.

The change event is called when the value in one of the attribute changes.

As an Example If i am having attribute " Anyname", on change of attribute "Anyname" if i want to call javascript method i can do this as:

Syntax:

<aura:attribute name="Anyname" type="String" />

<aura:handler name="change" value="{!v.Anyname}" action="{!c.doinit}"/>

37) You are having a requirement to pass value from child component to parent component which type of event you will use?

We will use Component event. Component event are used in case when there is a relationship between component. Component Events are fired by the child components and handled by the parent component.

38) You are having a requirement to pass value from one component to other component which are not related but a part of same application which type of event you will use?

We will make use of Application event. Application event are the event handle by any component no matter what relationship between them but they should be inside single application.

39) How to ensure field level security while working with lightning components?

Make use of Lightning:recordForm or Standard controller of lightning component (force:recordData).

40) Lightning component is what type of framework?

It is a component based framework. It is an event driven architecture. It can called as a MVCC framework which has two controller, one is client side and other is server side.

41) How to use lightning component with Salesforce mobile app?

Make a tab for lightning component and include this tab in Salesforce1 mobile navigation.

42) What are the requirement to call a server side controller method from Javascript controller?

Method should be static and must be Aura enabled using @AuraEnabled.

43) When CRUD operations can be performed by form-based components like lightning:recordForm, lightning:recordViewForm, lightning:recordEditForm taking field level security into consideration so what is the need of force:recordData?

force:recordData is known as standard controller of lightning component similar to we have standard controller in visualforce page. On its own, force:recordData does not have inbuilt UI. We need to define the fields for taking inputs. The lack of UI elements makes it a powerful addition. We can use it to create highly customizable user interfaces beyond what the form-based components provide. We can use custom components to display the data fetched by force:recordData.

44) What are different component bundles in Salesforce Lightning component?

A component bundle contains a component or an app and all its related resources.

When you build lightning component you deal with the following component bundles,

Component

Components contains markup for component or app.
The only required resource in a bundle.
Each bundle contains only one component or app resource.

Ex:

Mycomp.cmp(Sample component)

MycompApp.app(Sample app)

Controller

Controller is used to handle client side events in components.

Ex:

Mycontroller.js

Helper

Contains Javascript functions to handle logic.

Ex: Myhelper.js

Style

Contains styles for the component.

Ex: Mycomp.css

Documentation

Documentation includes description and example to demonstrate the use of component.

Ex: MyComp.auradoc

Renderer

Contains default rendering behavior for component, We can override this by custom renderer.

Ex: MyCompRenderer.js

SVG

It is a custom icon resource for components that get displayed before the component name in lightning app builder or community builder.

Ex: MyComp.svg

Design

File required for components used in Lightning App Builder, Lightning pages, Community Builder, or Flow Builder.

App

App is used to run the component.

45) What is NameSpace in Salesforce Lightning component?

The lightning component which we used are a part of NameSpace. NameSpace is basically used to group components together. The default NameSpace is c. We can create our own NameSpace for our organization. If we set the NameSpace for our organization than this NameSpace is used for all of our Lightning components.

46) How can a Component or Application reference another Component?

Component or Application can reference another component using <NameSpace:ComponentName> in its markup.

47) What is the difference between <lightning:input> and <ui:input> in Salesforce Lightning component?

<lightning:input> are equipped with Lightning Design System Stylling whereas <ui:input> is not equipped with Lightning Design System Styling.

48) Which interface needs to be implemented if we want our component to be used in Community?

forceCommunity:availableForAllPageTypes

49) Explain the below javascript controller method?

Method:

({

addContact: function(component, event, helper) {

var action = component.get('c.insertContact');

action.setParams({

});

action.setCallback(this, function(response) {

var state = response.getState();

if (state === "SUCCESS") {

alert('Contact inserted successfully');

} else if (state === "INCOMPLETE") {

} else if (state === "ERROR") {

}

});

$A.enqueueAction(action);

}

)}

Explanation:

1) addContact is a Javascript controller method will be called from Component markup.

2) Another Javascript controller method cannot called this "addContact" Method.

3) The parameters component in addContact is automatically provided by framework as a parameters to Javascript controller method so that the markup properties like attributes can be accessed using this.

4) The parameters event is automatically provided by framework as a parameters to Javascript controller method so that the source from which the addContact controller method was called can be determined.

5) The parameters helper is automatically provided by framework as a parameters to Javascript controller method and using this the helper method can be called from Javascript controller method.

6) var action = component.get('c.insertContact'); is calling the server method which has the name insertContact.

7) action.setParams({ }); is optional parameter which is used to pass the apex server method the required paramters.

8) action.setCallback received response as parameter using which the state of response and response return can be determined.

9) $A.enqueueAction(action); adds the server-side controller action to the queue of actions to be executed.The actions are asynchronous and have callbacks.

50) Explain the syntax to register the Component event?

Component:

<aura:component >

<aura:registerEvent name="registrationInChild" type="c:CompEvent"/>

<aura:attribute name="textMessage" type="String" default="Part from child comp"/>

<lightning:button label="Click To Fire" onclick="{!c.doHandleEvent}"/>

</aura:component>

Component Event: (Name=CompEvent)

<aura:event type="COMPONENT" description="Event template" >

<aura:attribute name="storeMessage" type="String"/>

</aura:event>

51) How to get the above event i.e(Component event) in Javascript controller of the component and how to fire it?

var cmpEvnt=component.getEvent("registrationInChild"); // Getting the event

cmpEvnt.setParams({

storeMessage : component.get("v.textMessage") // Setting some parameter on event

});

cmpEvnt.fire(); // Firing the event

52) How to handle the above event i.e(Component event) in the parent component?

Parent Component: (Name=ParentComp)

<aura:component >

<aura:handler name="registrationInChild" event="c:CompEvent" action={!c.doHandleFromChild}"/>

<aura:attribute name="parentMessage" type="String" />

<c:ChildComp/>

</aura:component>

Javascript controller:

({

doHandleFromChild : function(component, event, helper) {

var valueFromEvent=event.getParam("storeMessage");

component.set("v.parentMessage",valueFromEvent);

}

})

53) Explain the syntax to register the Application event? Is it compulsory to register the application event?

Component:

<aura:component >

<aura:registerEvent name="regInChild" type="c:AppEvent"/>

<aura:attribute name="textMessage" type="String" default="Part from child comp"/>

<lightning:button label="Click To Fire" onclick="{!c.doHandleEvent}"/>

</aura:component>

Application event:

<aura:event type="APPLICATION" description="Event template" >

<aura:attribute name="storeMessage" type="String"/>

</aura:event>

No, It is not necessary to register the application event. It is optional. You can directly fire the event without registering.

54) How to get the above event i.e(Application event) in Javascript controller of the component and how to fire it?

var aeEvent=$A.get("e.c:AppEvent");

aeEvent.setParams({

storeMessage : component.get("v.textMessage")

});

aeEvent.fire();

55) How to handle the above event i.e(Application event) in some other component?

Component:

<aura:component >

<aura:handler event="c:AppEvent" action="{!c.doHandleFromChild}"/>

<aura:attribute name="MessageFromApplication" type="String" />

{!v.MessageFromApplication}

</aura:component>

Controller:

({

doHandleFromChild : function(component, event, helper) {

var valueFromEvent=event.getParam("storeMessage");

component.set("v.MessageFromApplication",valueFromEvent);

}

})

56) What are the phases available with Component events?

1)Bubble phase (Movement is from bottom to top in case of bubble phase)
2)Capture phase (Movement is from top to bottom in case of capture phase)

Default phase for the component event is Bubble phase.If we do not specify any phase it is considered as bubble phase in case of component events.

57) Let say i have three components Bottom, Middle and Top as shown in below image. Middle comp is the immediate parent of Bottom comp and Top comp is the immediate parent of Middle comp. If i am firing a Component event from bottom component and handling it in Middle and Top component. What would be the behavior?

Salesforce Lightning Interview Questions

BottomComp.cmp

<aura:component >

<aura:registerEvent name="propagationEvent" type="c:CompEventforpropagation"/>

<lightning:button label="Start Event propagation" onclick="{!c.executeEvent}"/>

</aura:component>

BottomCompcontroller.js

({

executeEvent : function(component, event, helper) {

var cmpEvt=component.getEvent("propagationEvent");

cmpEvt.fire();

}

})

MiddleComp.cmp

<aura:component >

<c:BottomComp/>

<aura:handler name="propagationEvent" event="c:CompEventforpropagation" action="{!c.doHandleinMiddle}"/>

</aura:component>

MiddleCompcontroller.js

({

doHandleinMiddle : function(component, event, helper) {

alert('From Middle component controller');

}

})

TopComp.cmp

<aura:component >

<c:MiddleComp/>

<aura:handler name="propagationEvent" event="c:CompEventforpropagation" action="{!c.doHandleinTop}"/>

</aura:component>

TopCompcontroller.js

({

doHandleinTop : function(component, event, helper) {

alert('From top component controller');

}

})

EVENT:

<aura:event type="COMPONENT" description="Event template">

</aura:event>

Application:

<aura:application extends="force:slds" >

<c:TopComp/>

</aura:application>

OUTPUT:

From Middle component controller

From top component controller

58) If in question 57 If i put phase="capture" in Top comp. How would be the behavior?

TopComp.cmp:

<aura:component >

<c:MiddleComp/>

<aura:handler name="propagationEvent" event="c:CompEventforpropagation" action="{!c.doHandleinTop}" phase="capture"/>

</aura:component>

OUTPUT:

From top component controller

From Middle component controller

59) If in question 57 if i put phase="capture" in both Top and Middle comp. How would be the behavior?

OUTPUT:

From top component controller

From Middle component controller

60) If in question 57 if i put phase="capture" in Top comp and phase="bubble" in Middle comp.
How would be the behavior?

OUTPUT:

From top component controller

From Middle component controller

61) If in question 57 if i put phase="bubble" in Top comp and no phase in Middle comp.
How would be the behavior?

OUTPUT:

From Middle component controller
From top component controller

62) If in question 57 if i put phase="bubble" in Middle comp and no phase in Top comp.
How would be the behavior?

OUTPUT:

From Middle component controller
From top component controller

63) If in question 57 if i put phase="bubble" in both Middle comp and Top comp.
How would be the behavior?

OUTPUT:

From Middle component controller
From top component controller

NOTE:

1)Bubble phase will always moves from bottom to top.

2) Capture phase will move from top to bottom

64) What are the phases available with Application events?

1)Bubble phase

2)Capture phase

3)Default phase

Lightning Web Components Interview Questions.

1) What is LWC(Lightning Web Components)?

As of now, we have built a lightning component using the "Aura Components model". we can also build a lightning component using the "Lightning Web Components model". Lightning Web Components are custom HTML elements build using the HTML Elements and modern Javascript. We can build components using any of the models and can place these components on the same lightning page.

For developing LWC we require "Salesforce Extensions for Visual Studio Code" and for deploying LWC from an org we require "Salesforce CLI".

Aura Components make use of own custom component model, custom templates, custom components, etc while LWC is built on web standards and it makes use of web components, templates, custom elements which we have in web standards. Both the Aura component, LWC make use of Security, LDS and Base lightning components.

Important points to note:

1) Aura component and LWC can exist on the same lightning page.
2) Aura component can include LWC

2) What is Scratch org?

Scratch org is a disposable Salesforce org used for development and testing.
Scratch org can be created for a maximum of 30 days after which scratch org gets deactivated. The default duration for Scratch org is 7 days.

3) Explain the Lightning Web Component Bundle?

LWC bundle contains an HTML file, a JavaScript file, and a metadata configuration file
and these files are created once we create a Lightning web component.

We can also create a .css file for styling purpose and We can also create SVG file for the purpose of displaying icon.

4) How to render the HTML file conditionally?

If we want to render HTML conditionally we can make use of if:true={propertyName},if:false={propertyName} in nested template tag.

5) How to iterate over an array in HTML file?

We can make use of for:each directive and iterator directive.

for:each directive:

for:each directive is used to render an array. To render an array add the for:each directive to a nested template tag, for:item is used to access the current item, for:index is used to access the current index.

Iterator directive:

If you have the requirement to access the first and the last element in the list use the iterator directive.

A sample HTML file is as shown below.

.html file

<template>

<b>for:each directive</b>
<template for:each={students} for:item="item" for:index="index">
<p key={item.id}>
{item.Name}
{item.Branch}
</p>
</template>

<b>Iterator directive</b>
<template iterator:it={students}>
<li key={it.value.id}>
{it.value.id}
{it.value.Name}
{it.value.Branch}
</li>

</template>

</template>

6) What are the types of decorators in lightning web components?

We have 3 Decorators in Lightning Web Components.

1) @api
2) @track
3) @wire

7) Explain all three decorators in lightning web components?

Refer to the below link for an explanation.

https://www.sfdc-lightning.com/2020/01/decorators-in-lightning-web-components.html

8 ) How we can build Lightning web components?

It is always recommended to use Salesforce DX tools for developing Lightning web components however we can still use code editor to develop Lightning web components.

Note: we cannot build LWC in the Developer Console.

9) How can we use Lightning web component with unsupported tool?

To use a Lightning web component with an unsupported experience or tool we can wrap it in an Aura component.

10) Which command is use to authorize a dev hub?

"SFDX: Authorize a Dev Hub"

11) How many scratch orgs we can create daily, and how many can be active at a given point?

Our "Dev Hub" org edition determines how many scratch orgs we can create daily, and how many can be active at a given point.

12) How many files are created by default when we create a Lightning Web Component?

Three files are created as below.

HTML file.

JavaScript file.

Meta configuration file.

13) What is the purpose of .css file and svg file in Lightning Web Component bundle?

.css file is use for styling purpose and svg file is use for purpose of displaying icon.

14) What is the purpose of HTML file in Lightning Web Component bundle?

The HTML file is enclosed within the <template> tags.
It contains the component HTML.

Sample HTML file shown below,

</template>

15) What is the purpose of JavaScript file in Lightning Web Component bundle?

The JavaScript file defines the behavior of HTML element present in HTML file.
JavaScript files in Lightning web components are ES6 modules. By default, everything declared in a module is local—it’s scoped to the module.
If we want to import a class, function, or variable declared in a module we use the import statement.
If we want to allow other code to use a class, function, or variable declared in a module we use the export statement.
The core module in Lightning Web Components is lwc. The import statement imports LightningElement from the lwc module.

import { LightningElement } from 'lwc';

Here, LightningElement is a custom wrapper of the standard HTML element.

Extend LightningElement to create a JavaScript class for a Lightning web component. You can’t extend any other class to create a Lightning web component.

export default class MyComponent extends LightningElement {

// Code

}

The JavaScript file can contain:

The component’s public API via public properties and methods annotated with @api.

Private properties

Event handlers

16) What is Meta configuration file in Lightning Web Component?

The Meta configuration file defines the metadata values for the components.

If we don’t include a configuration file for our component, we get an error shown below when we push your changes.

"Cannot find Lightning Component Bundle <component_name>".

17) Is it possible to use multiple html files in a Lightning Web Component?

Yes and for this we will need to create multiple HTML files in the component bundle and than Import them all and add a condition in the render() method to return the correct template.

18) How many style sheet can a component have?

Each component can have only one style sheet.

19) Can components share the style sheet?

No.

20) Does the style of the component get lost or override when we use the component with its own style sheet in different context?

When we define a style sheet for a component in a component folder it is limited to that component only and this avoid loosing the style sheet of the component when we reuse this component in different contexts. This also avoid component style sheet getting override in other part of the page.

21) How to share CSS style sheet in Lightning Web Component?

1) If we want to share CSS style than we will need to create a module that contains only a CSS file and for this we will need to create a Lightning Web Component with only single CSS file as shown below.

2) After we create a module we can import the module into CSS file of any Lightning Web Component as shown below.

@import 'namespace/nameOfModule';

22) What is used to display toast notifications in Lightning Web Component?

Toast notification pops up to alert users of a success, error, or warning.

We need to import ShowToastEvent from the lightning/platformShowToastEvent module to display a toast notification in Lightning Experience or Experience Builder sites.

For more information visit : Display toast notifications in Lightning Web Component

23) List the callback methods that handles life cycle of LWC?

Lightning web components have callback methods that handle the lifecycle of LWC.

constructor()
connectedCallback()
disconnectedCallback()
render()
renderedCallback()
errorCallback(error, stack)

For more details visit --> Lifecycle hooks in LWC

24) Explain @track decorator in LWC with example?

--> @track decorator in Lightning Web Component

25) Explain @api decorator in LWC with example?

--> @api decorator in Lightning Web Component

26) Explain @wire decorator in LWC with example?

--> @wire decorator in Lightning Web Component

27) How to pass data from child component to parent component in lightning web component?

To pass data from child component to parent component we can trigger event from child LWC and handled it parent LWC as shown in below example.

childcompdemo.html

In the child component HTML file, we are firing event based on button click.

<div>

Hi, I am from child component HTML file.

<lightning-button label="Click Me To Fire Event" onclick={handlebuttonclick}></lightning-button>

</div>

</template>

childcompdemo.js

In the child comp js file, we are passing childcompname and childcompdescription property to parent component.

import { LightningElement, api } from 'lwc';

export default class Childcompdemo extends LightningElement {

@api childcompname='Name of comp is childemocomp';

@api childcompdescription='Description of comp is testing';

handlebuttonclick(){

const evt= new CustomEvent('myfirstevent', {detail:{childcompname:this.childcompname,childcompdescription:this.childcompdescription}});

this.dispatchEvent(evt);

}

parentcompdemo.html

In the parent component HTML file, we are handling the child comp event.

The keyword "on" is appended before the name of the event using which it is fired.

In this example, we have fired the event from the child component using the name "myfirstevent".

<div>

Hi, I am from parent component HTML file.

<c-childcompdemo onmyfirstevent={handlechildevent}></c-childcompdemo>

</div>

</template>

parentcompdemo.js

/* eslint-disable no-alert */

import { LightningElement } from 'lwc';

export default class Parentcompdemo extends LightningElement {

handlechildevent(event){

const childcompname=event.detail.childcompname;

const childcompdescription=event.detail.childcompdescription;

alert('Event handled in Parent Comp');

alert('child comp name is:'+childcompname);

alert('child comp description is:'+childcompdescription);

}

lightningapp.app

<aura:application extends="force:slds">

<c:parentcompdemo></c:parentcompdemo>

</aura:application>

How to pass data from child component to parent component in lightning web component

28) How to pass data from parent component to child component in lightning web component?

We can pass data from parent LWC to child LWC while calling the child LWC from parent LWC.

In child LWC we need to decorate properties with @api decorator as shown in below example.

Properties decorated with @api are public reactive properties. When we use the @api decorator, we must import it explicitly from lwc as shown below.

import { LightningElement, api } from 'lwc';

Parent component can make use of the Public Property.