Lightning Web Components are custom HTML elements build using HTML Elements and modern Javascript. We can build components using any of the models and can place these components on the same lightning page. LWC is built on code that runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance.
2. Which command is used to authorize a dev hub?
"SFDX: Authorize a Dev Hub"
3. What is the file structure of Lightning Web Components?
--helloWorld folder
-helloWorld.html
-helloWorld.js
-helloWorld.js-meta.xml
-helloWorld.css
-helloWorld.svg
The folder and its files must follow these naming rules.
- Can’t contain a hyphen (dash)
- Must begin with a lowercase letter
- Can’t include whitespace
- contain only alphanumeric or underscore characters
- Can’t end with an underscore
- Must be unique in the namespace
- Can’t contain two consecutive underscores
4. How can you display components HTML conditionally?
To render HTML conditionally, add the if:true|false directive to a nested <template> tag that encloses the conditional content.
5. How we can bind data in LWC?
In the template, surround the property with curly braces, {property}. To compute a value for the property, use a JavaScript getter in the JavaScript class, get property(){}. In the template, the property can be a JavaScript identifier (for example, person) or dot notation that accesses a property from an object (person.firstName). LWC doesn’t allow computed expressions like person[2].name['Andy'].
// helloWorld.html
// helloWorld.js
6. How we can pass data from HTML to JS controller?
We can use the onchange attribute to listen for a change to its value. When the value changes, the handleChange function in the JavaScript file executes. Notice that to bind the handleChange function to the template, we use the same syntax, {handleChange}
<!-- helloWorld.html -->
// helloWorld.js
7. We can use the same eventHandler with multiple fields as well?
In Controller
8. How we can iterate the list in Lightning Web Component (LWC)?
We have two ways to iterate the List in LWC:
for:each
When using the for:each directive, use for:item="currentItem" to access the current item. This example doesn’t use it, but to access the current item’s index, use for:index="index".
To assign a key to the first element in the nested template, use the key={uniqueId} directive.
Iterator:
To apply a special behavior to the first or last item in a list, use the iterator directive, iterator:iteratorName={array}. Use the iterator directive on a template tag.
Use iteratorName to access these properties:
value—The value of the item in the list. Use this property to access the properties of the array. For example, iteratorName.value.propertyName.
index—The index of the item in the list.
first—A boolean value indicating whether this item is the first item in the list.
last—A boolean value indicating whether this item is the last item in the list.
9. What are the public properties in Lightning Web Component?
Public properties are reactive. If the value of public property changes, the component re-renders. To expose a public property, decorate a field with @api . Public properties define the API for a component.
10. How to set Property from Parent component to child component?
To communicate down the containment hierarchy, an owner can set a property on a child component. An attribute in HTML turns into a property assignment in JavaScript.
// helloWorld.js
11. How we can pass data from a parent component to a child component?
LWC support one-way data transfer from parent to child. A non-primitive value (like an object or array) passed to a component is read-only. So the component cannot change the content of the object or array. As a result, if the component tries to change the content, we will get errors in the console.
We can pass primitive data types as most of the components supports this.
12. 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 then Import them all and add a condition in the render()
method to return the correct template.
13. How many style sheets can a component have?
Each component has only one style sheet.
14. Can components share the style sheet?
No.
15. What are the types of decorators in lightning web components?
We have 3 Decorators in Lightning Web Components.
i. @api
ii. @track
iii. @wire
16. What is a @wire decorator in the js file?
Lightning web components use a reactive wire service to access Salesforce data (calling an apex method).
17. What is a @api decorator in the js file?
It is used to expose the public property of a web component. this property can use in it's parent component.
18. What is a @track decorator in the js file?
It will keep track of the property’s value changes. This decorator is used to make a property private, which helps re-render the component when the property value is changed.
19. What is the use of if:true={propertyName}, if:false={propertyName}?
if:true={propertyName}, if:false={propertyName} is used in nested template tag for rendering HTML conditionally.
20. How can we push markup from a parent component to a child component?
We use properties to send or push information from parent to child component.
We need to use slots to push markup from parent to child components.
21. How can we navigate a user from the LWC component to another component?
We cannot directly send a user from one LWC to another LWC.
We need to wrap an LWC in an Aura Component and using navigation mixins in LWC we can navigate the user from LWC to Aura Component( which holds another LWC).
22. Can we use an LWC as a quick action?
Until Winter ‘21, using LWC as quick as the action was not possible.
Starting Spring ‘21 we can create an LWC and then include the appropriate targets in the XML file.
With that in place, we can use LWC as a quick action.
 Interview Questions ){kind=link}