Data binding in lwc component

With data binding developers can use the javascript property(variable) values to disply variables values in the html file.

To display a JavaScript property value in an LWC component, declare the property in the JavaScript file and reference it in the HTML file.

For example, to reference the 'Hello World' text from a property, follow the example below.

//helloWorld.html
<template>
    <p>{greeting}</p>
</template>

//helloWorld.js
import { LightningElement } from 'lwc';

export default class helloWorld extends LightningElement {
    greeting = 'Hello World';
}

@api decorator

To define a public property declare variables with @api decorator. The api decorator needs to be imported to use in the javascript file. The public property variables are reactive i.e if the value is updated then the UI component will rerenders.

In our example, the variable 'greeting' can be set from a parent component. In order to set the value of this property, declare the 'greeting' variable as a publi property by setting the @api decorator.

//helloWorld.js
import { LightningElement,api } from 'lwc';

export default class helloWorld extends LightningElement {
    @api greeting;
}

To set the greeting variable from a parent component named 'Dashboard'

//dashboard.html
<template>
    <c-hello-world greeting="Hello World"/>
</template>

You may have noticed couple of things from the above example:

• To reference a child component from a parent component in lwc, use c-componentname.
• The component name has to follow a kebab case, meaning all uppercase letters will be transformed to '-' lowercase letters.

@track decorator

The LWC framework detects changes variable value changes for premitive data types and invoke UI re-rendering.

For the complex types such as arrary, objects, the framework detects the initial assignment and invoke UI re-rendering.

The framework doesn't detects the individual property changes after initial assignment for complex types. To invoke the UI re-rendering, declare the type with @track property.

Conditional rendering in lwc

To display a section conditionally in lwc, use template if:true statement with a variable.

In our previous hello world example, we will add conditional rendering based on a variable named isHelloWorld. If isHelloWorld is set to true, we will display hello world or we will display Hello.

//helloWorld.html
<template>
    
    //Renders when isHelloWorld is true
    <template if:true={isHelloWorld}>
        <p>Hello World</p>
    </template>

    //Renders when isHelloWorld is false
    <template if:false={isHelloWorld}>
        <p>Hello</p>
    </template>

</template>

//helloWorld.js
import { LightningElement,api } from 'lwc';

export default class helloWorld extends LightningElement {
    isHelloWorld = false;
}

How to display a list in lwc

To display a list of values in lwc use <template for:each={arraryvariable} for:item= "loopVariable"></template> tag.

The source property arraryvariable must hold a list of values.

Following is a sample code to display a list in lwc. The input soruce is a variable called names.

//displayArrary.html
<template>
    
    //Renders a list of values
    <template for:each={names} for:item="name" for:index="index">
        <p key={name.id}>{name.value}</p>
    </template>

</template>

//displayArrary.js
import { LightningElement } from 'lwc';
    
export default class displayArrary extends LightningElement {

    names = [
        {
            "id" : "1",
            "value" : "Adam"
        },
        {
            "id" : "2",
            "value" : "Smith"
        }
    ]
}

Handle onclick event from a button in lwc

Button events helps developers to add interactivity to HTML buttons so that on click of a button you can submit a form or navigate to another screen or show a message and many more actions.

To handle the button events, a javascript handler method is required.

See the following example to display a text on the screen when clicked on a button.

HTML file

//displayMessage.html
<template>
    
    //Render a message
    <template if:true={showMessage}>
        Hello
    </template>

    //Button with onclick action
    <lightning-button onclick={handleShowMessage} label="Show message"></lightning-button>
</template>

In the above HTML file, the onclick event on the lightning-button element is bound to the JavaScript function handleShowMessage. Whenever the user clicks the button, the handleShowMessage function from the JavaScript file will be invoked.

Javascript file

//displayMessage.js
import { LightningElement } from 'lwc';
    
export default class displayArrary extends LightningElement {
    showMessage = false;

    handleShowMessage(){
        this.showMessage = true;
    }
}
        

//simpleform.html
<template>
    <lightning-input type="text" label="name" onchange={handleChange}>
    </lightning-input>
</template>

//SimpleForm.js
import { LightningElement } from 'lwc';
    
export default class SimpleForm extends LightningElement {
    
    handleChange(event){
        let name = event.target.value;
    }
}