onLoad in Lightning Web Component

Do you have requirement to do something onLoad in Lightning Web Component? In Aura Components, You have init event handler, but what is alternative of init event handler in Lightning web components?

Replace an init event handler in an Aura component with the standard JavaScript connectedCallback() method in a Lightning web component.

Component Design

The lightning web component has three files in its component bundle. JavsScript file contains the connectedCallback() method which gets fire on load of the component. We have created a lightning web component named onloadLWC. It has three files in its bundle.

Code

onloadLWC.html

HTML file contains a lightning-input with value attribute with tracked property named inputValue. Whenever the inputValue property gets changed, the screen gets rerendered to reflect the updated value.

<template>
    <div class="slds-box slds-card">
        <lightning-input label="input number" value={inputValue}></lightning-input>
    </div>    
</template>

onloadLWC.js

The javaScript file contains connectedCallback() method which will fire whenever component loads. In our scenario, We are setting a value to inputValue property.

import { LightningElement, track } from "lwc";

export default class OnloadLWC extends LightningElement {
  @track inputValue;
  // initialize component
  connectedCallback() {
    this.inputValue = 5;
  }
}

onloadLWC.js-meta.xml

The configuration file defines the metadata values for the component, including the design configuration for Lightning App Builder and Community Builder.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="onloadLWC">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__RecordPage</target>
      <target>lightning__AppPage</target>
      <target>lightning__HomePage</target>
    </targets>
    
</LightningComponentBundle>

Demo (onLoad in Lightning Web Component)

This component shows an example of doing something on load of lightning web component. Here, we are setting the value of input field to 5 every time it loads.