Lightning Components

 1. Types of Events in LWC:

 

LWC (Lightning Web Component) supports three types of events:

 

a. Component Events: These events are fired and handled within the LWC component hierarchy. They are used for communication between components that are not directly related, enabling loose coupling.

 

b. DOM Events: These events are standard HTML or browser events like click, change, submit, etc. They are fired by elements in the component's template and handled by event handlers in the JavaScript file.

 

c. Custom Events: The developer custom-defined these events using the CustomEvent class. They are used for more specific and custom communication requirements within the component or across the component hierarchy.

 

2. In how many ways apex methods can be called from LWC:

 

Apex methods can be called from LWC using two approaches:

 

a. Imperative Apex: In this approach, you import the Apex method from the server-side Apex class and call it imperatively using JavaScript. This involves making an HTTP request to the server and handling the response.

 

b. Wire Service: The wire service allows you to declaratively call an Apex method and automatically handle data retrieval and cache management. It uses the reactive data services to fetch data from the server and updates the data whenever there are changes.

 

3. Lifecycle hooks in LWC:

 

LWC provides several lifecycle hooks that allow you to perform actions at specific points in the component lifecycle. The commonly used hooks are:

 

a. Constructor: Called when an instance of the component is created.

 

b. ConnectedCallback: Called when the component is inserted into the DOM.

 

c. RenderedCallback: Called after the component is rendered.

 

d. DisconnectedCallback: Called when the component is removed from the DOM.

 

e. Error Callback: Called when there is an error during rendering, in the child component, or in a lifecycle hook.

 

4. Default files in LWC:

 

When you create an LWC component, the default files generated are:

 

a. JavaScript (.js) file: Contains the component's JavaScript code, including the component's logic and event handlers.

 

b. HTML (.html) file: Contains the component's HTML template structure.

 

c. CSS (.css) file: Contains the component's CSS styles.

 

5. Decorators in LWC and their purpose:

 

Decorators in LWC are special JavaScript annotations that provide metadata and additional functionality to the component class. The decorators available in LWC are:

 

a. @api: Exposes a public property or method that can be accessed by the parent or other components.

 

b. @track: Marks a property for reactive behavior. Changes to a tracked property cause the component to rerender.

 

c. @wire: Connects a property in the component's JavaScript file to a wire service, allowing the component to receive and react to data from Salesforce or a custom Apex method.

 

d. @trackGetter and @trackSetter: Used to define custom getter and setter methods for a tracked property.

 

e. @apiGetter: Allows read-only access to a public property defined with @api.

 

6. Difference between wire and imperative method:

 

The main differences between wire and imperative methods in LWC are:

 

Wire methods are declarative, while imperative methods are called imperatively from JavaScript.

 

Wire methods use the reactive data services and handle data retrieval, caching, and automatic updates, whereas imperative methods require explicit handling of data retrieval and updating.

 

Wire methods are cached and automatically updated when the underlying data changes, while imperative methods require manual handling of caching and data synchronization.

 

Wire methods have a built-in error handling mechanism, whereas imperative methods require explicit error handling.

 

7. Can we perform DML using the wire method:

 

No, you cannot perform DML (Data Manipulation Language) operations like insert, update, delete, or undelete using the wire service in LWC. The wire service is specifically designed for data retrieval purposes, using the reactive data services provided by Salesforce.

 

8. How to pass information from child to parent & vice versa in LWC:

 

To pass information from a child component to a parent component in LWC, you can follow these steps:

 

a. Define a public property in the parent component using the @api decorator.

 

b. Pass the data from the child component to the parent component by setting the value of the public property in the child component.

 

c. The parent component can then access the passed data through the public property.

 

Vice versa, to pass information from the parent component to a child component in LWC, you can pass data through attributes. Define a public property in the child component using the @api decorator, and pass the value from the parent component to the child component through the attribute binding in the parent's HTML template.

 

9. Difference between Component & Application Event:

 

Component Events and Application Events are two types of events in LWC with different scopes and purposes:

 

Component Events: Component events are used for communication within a component hierarchy. They are fired in a child component and can be handled by any parent component in the hierarchy. Component events enable loose coupling between components and are ideal for communication between unrelated or indirectly related components.

 

Application Events: Application events are used for cross-component communication that can traverse the entire application. They are fired and handled at the application level, meaning they can be handled by any component in the application. Application events are useful when multiple components need to be notified or respond to a specific event, regardless of their hierarchical relationship.

 

10. Explain Package.xml and Destructive package.

 

Package.xml is a manifest file used in Salesforce Metadata API deployments. It specifies the metadata components that need to be retrieved or deployed in a Salesforce org. The file defines the types of metadata components (e.g., Apex classes, objects, layouts, etc.) and their corresponding names or patterns. It allows you to selectively retrieve or deploy specific components rather than the entire org's metadata.

 

Destructive package: A destructive package is a package that is used to delete or remove specific metadata components from a Salesforce org during a deployment. It contains a special type of metadata component called "destructiveChanges.xml," which lists the components that need to be deleted. When deploying a destructive package, the specified components will be removed from the target org, ensuring a clean removal of unwanted metadata.

 

11. What is Lightning Data Service:

 

Lightning Data Service (LDS) is a Salesforce JavaScript library that provides a standard way to access and manipulate Salesforce data in Lightning components. It simplifies the process of data retrieval, modification, and caching by abstracting away the underlying data access layer. LDS automatically handles data synchronization, caching, and optimized server calls, reducing the amount of code and improving performance. It also respects the user's sharing and security settings, ensuring data integrity and adherence to Salesforce's security model.

 

12. Different between record-form and record-edit-form in LWC:

 

record-form: The record-form component in LWC is used to display a read-only view of a record's data. It simplifies the process of retrieving and displaying record data by automatically fetching the data based on the specified recordId. The component intelligently renders the appropriate user interface elements for standard and custom fields, including related lists and related records.

 

record-edit-form: The record-edit-form component is used to display and edit a record's data. It provides a user-friendly interface for editing field values and submitting the changes to the server. Similar to record-form, it automatically retrieves the record data based on the specified record Id and handles the field rendering and validation.

 

13. In LWC, how to pass data from parent to child and from child to parent component:

 

From parent to child: To pass data from a parent component to a child component, you can pass the data as attributes. Define a public property in the child component using the @api decorator. In the parent component's HTML template, pass the data to the child component by binding the value of the public property to the desired value in the parent's JavaScript code.

 

From child to parent: To pass data from a child component to a parent component, you can use custom events. Define a custom event in the child component using the Custom Event class. When the data needs to be passed, fire the custom event from the child component and pass the data as part of the event payload. In the parent component, handle the custom event by defining an event handler function, and access accessing data from the event object.

 

14. ConnectedCallback:

 

ConnectedCallback is a lifecycle hook in LWC that is called when a component is inserted into the DOM. It is similar to the renderedCallback lifecycle hook, but it is called only once when the component is initially added to the DOM. This hook is commonly used to perform initialization tasks or to make API calls to fetch data that is required when the component is first rendered.

 

15. Types of events used in LWC:

 

LWC supports three types of events:

 

Component Events: Component events are used for communication within a component hierarchy. They are fired and handled within the LWC component or its parent components, enabling loose coupling between components.

 

DOM Events: DOM events are standard HTML or browser events like click, change, submit, etc. They are fired by elements in the component's template and handled by event handlers in the JavaScript code. DOM events allow interaction with the user interface elements.

 

Custom Events: Custom events are events specifically defined by the developer using the CustomEvent class. They provide a way to handle custom communication requirements within the component or across the component hierarchy. Custom events allow developers to define their own event types and pass custom data along with the event.