connectedCallBack() In LWC With Example
salesforcepoint →
Thursday, 1 October 2020
LWC connectedCallBack()
This is one of life cycle hook in web component JavaScript. connectedCallBack function invokes/fires automatically when certain lwc component inserted into web dom. It is works like init handler in lightning aura component, we can say it is lwc init handler.
Important Points about ConnectedCallBack()
- It is flows from parent to child component. I.e if main component has inner component/child components then, ConnectedCallBack function on parent invoked first and then ConnectedCallBack of child lwc component will be fired.
- In this function we can access only host element i.e template.
- By using "this.template" we can access host element.
- It's invoked after constructor hook fired.
- If we want fire any logic on component load (example dispatching event, assigning values to properties) then we should use ConnectedCallBack life cycle hook.
Examples for connectedCallBack in LWC
These are the basic example to understand connectedCallback function.
In this example we need to display list of contacts on table. While table is loading we have to show spinner.
AccountController
public with sharing class AccountController {
@AuraEnabled(cacheable=true)
public static List<Account> getAccountList(){
return [SELECT Id, Name,Phone,Industry FROM Account order by createddate desc LIMIT 5];
}
}connectedCallbackLwc.html
<template>
<template if:true={isSpinner}>
<div class="spinner">
<lightning-spinner alternative-text="Loading" size="medium"></lightning-spinner>
</div>
</template>
<lightning-card title="connectedCallback Example">
<lightning-datatable data={accountList} columns={cols} key-field="Id">
</lightning-datatable>
</lightning-card>
</template>connectedCallbackLwc.js
import { LightningElement, wire, track } from 'lwc';
import getLatestAccounts from '@salesforce/apex/AccountController.getAccountList';
const COLS = [
{ label: 'Name', fieldName: 'Name', type: 'text' },
{ label: 'Stage', fieldName: 'Phone', type: 'text' },
{ label: 'Amount', fieldName: 'Industry', type: 'text' }
];
export default class ConnectedCallbackLwc extends LightningElement {
cols = COLS;
@track isSpinner = false;
@track accountList = [];
connectedCallback() {
this.isSpinner = true;
}
@wire(getLatestAccounts) fetchAccList(result) {
this.isSpinner = false;
if (result.data) {
this.accountList = result.data;
this.error = undefined;
} else if (result.error) {
this.error = result.error;
this.accountList = [];
}
}
}LWC connectedCallBack() Output:
In above example we make "isSpinner" equals to true in connectedCallback function, so that we will see spinner on page load. Once page data loaded we turned off spinner by making "isSpinner" equals to false in fetchAccList wired function
