LWC: Ref Attribute And QuerySelector Method In Salesforce Lightning Web Components

/ apex, Salesforce / By

Hey there, today we’ll delve into LWC: ref and querySelector in LWC Salesforce. To craft dynamic and responsive applications, mastering tools like ref and querySelector is crucial. Within LWC, the ref attribute pertains to a component or an element within it, enabling interaction with these elements programmatically.

Additionally, take a look at this:

Main Points:

  • Employ ‘ref’ to obtain a reference to a particular Lightning component, enabling direct interaction, especially when adjusting properties or invoking methods.
  • Utilize ‘querySelector’ to locate and manipulate HTML elements within your component, ideal for working with standard HTML elements or non-LWC components.

Code :

LWC: ref offers a more convenient method for referencing and accessing your LWC elements at runtime. We’ll explore the performance efficiency of LWC: ref versus the query selector. While the query selector operates with one-by-one selection, LWC: ref directly references the object, enhancing program efficiency and performance.

<template
    <lightning-card title="Child Component" icon-name="standard:account">
        <div class="childcss1">
            <p>I'm a Child Component </p>
        </div>
        <p>{handleChild}</p>
        <lightning-input label="Name" lwc:ref="NameRef"></lightning-input>
        <lightning-input label="Age" type="Number" lwc:ref="AgeRef"></lightning-input>
        <lightning-button label="Submit" class="slds-grid slds-var-m-top_medium" onclick={handleSave} variant="brand"></lightning-button>
    </lightning-card>
</template>

childComponent.JS:

import { LightningElement , api } from 'lwc';
export default class Child extends LightningElement{
    handleChild = new Date();
    @api refresh() {
        this.handleChild = new Date();
    }
    @api handleSave() {
        const nameval = this.refs.NameRef.value
        const ageval = this.refs.AgeRef.value
        console.log('Name--', nameval);
        console.log('Age-', ageval);
    }
}

parentComponent.HTML:

<template>
    <lightning-card title="Parent" icon-name="standard:contact">
        <div class="slds-var-m-around_medium">
            <lightning-button label="ParentMe" onclick={handleParent}></lightning-button>
            <lightning-button label="Get Details" onclick={handleDetails}></lightning-button>
            <c-child lwc:ref="childcmp"></c-child>
        </div>
    </lightning-card>
</template>

parentComponent.JS:

import { LightningElement } from 'lwc';
export default class Parent extends LightningElement{
    handleParent(){
        console.log('Handle Click -');
        this.refs.childcmp.refresh();    
    }
    handleDetails(){
        this.refs.childcmp.handleSave();
    }
}

QuerySelector: querySelector is a method accessible via the template property within Lightning Web Components. It permits the selection of elements within your component’s template through CSS selectors.

The querySelector method is utilized for selecting an element, such as div, span, input, or any tag within an LWC component. Within querySelector, the class name serves as the unique identifier for a specific element, and if multiple elements exist, querySelectorAll is used, followed by a loop operation.

childComponent.HTML:

<template
    <lightning-card title="Child Component" icon-name="standard:account">
        <div class="childcss1">
            <p>Child Component </p>
        </div>
        <p>{handleChild}</p>
        <lightning-input label="Name" type="Text" onchange={name}></lightning-input>
        <lightning-input label="Age" type="Number" onchange={age}></lightning-input>
    </lightning-card>
</template>

childComponent.JS:

import { LightningElement , api  } from 'lwc'
export default class Child extends LightningElement {
    handleChild = new Date();
    @api name1;
    @api age1;
    @api refresh(){
        this.handleChild = new Date();
    }
    age(event){
        this.age1 = event.target.value;
    }
    name(event){
        this.name1=event.target.value;
    }
   
    @api getDetails(){
        console.log('Name', this.name1);
        console.log('Age', this.age1)
    }       
}

parentComponent.HTML:

<template
    <lightning-card title="Parent" icon-name="standard:contact">
        <div class="slds-var-m-around_medium">
            <lightning-button label="Get Details" onclick={handleDetails}></lightning-button>
            <c-child></c-child>
        </div>
    </lightning-card>
</template>

parentComponent.JS:

import { LightningElement } from 'lwc'
export default class Parent extends LightningElement {
    handleDetails(){
        this.template.querySelector('c-child').getDetails();
    }
}

Related Posts