Chapter 11: Start Learning LWC with Simple Code Snippets

Hello friends, in this Chapter I will share simple code snippets with you. Learn and enjoy !

1. Simple Greeting message

After going through this code, you will learn:

• Data Binding
• The Use of Compose Component

Code Explanation

1. Data Binding

To bind a property in a component’s template to a property in the component’s JavaScript class, in the template, surround the property with curly braces: {message}

2.Compose Components

Here I used compose component i.e. used one component into another. I have created component named “helloWorld”, where I have put all the code. I want to refer that component in another component named “app”.

This app.html file uses <c-hello-world> which refers to the child component in the c namespace.

Trailhead Link

Code Link

2. Data Binding

After going to this code, you will learn :

• Use of @api

Code Explaination: 

I declare a variable and named it “firstMessage” and added @api property to it because I want this variable(firstMessage) to publicly use it. @api is a public rendering property.

An owner component, in this case “app” uses the component in its HTML markup can access the component’s public properties via HTML attributes.

Code Link

3.Handle user Input

Code Explanation:

This component has an input field that takes input as greeting.

 <lightning-input label="Greetings" value={greeting} onchange={handleChange}>
 </lightning-input>

When the “value” of the input field changes, the component changes the value of the bound “greeting” property.

 handleChange(event) {
        this.greeting = event.target.value;
    }

Code Link

4.Handle Button Click

After going through this playground, you will learn:

• Change of value on click of button
• Change of color of text on click of the button

Code Link

Together we can learn faster 

Join LWC study group on Telegram 

Subscribe to Youtube channel and blog to get latest updates