A template is valid HTML with a <template> root tag. Template in LWC is like a VF page where we display results in UI.
How can we access variables in a template (Binding data)?
Using Property
Just like in the VF page, when we want to bring value from the Controller or take any value from UI to Controller, we use the property. In any programming language, we need a variable to hold data, and in LWC we call it Property.
Property can be called using {Property}
<!--LWC_helloWorld.html-->
<template>
<lightning-card>
Hello, {greeting}
</lightning-card>
</template>
//LWC_helloWorld.js
import { LightningElement } from 'lwc';
export default class LWC_hello extends LightningElement {
greeting='World!'
}
Using Getters
To compute a value for a property, use a JavaScript getter. For example, to convert the name to all uppercase letters, use a getter function in the JavaScript class
get propertyName() {
}
You can access the getter from the template same way {propertyName}
<!--LWC_GetterExample.html-->
<template>
<lightning-card>
<div>
<lightning-input label="First Name"
value={firstName}
onchange={handleChange}>
</lightning-input>
<lightning-input label="Last Name"
value={lastName}
onchange={handleChange}>
</lightning-input>
<p>
Uppercased Full Name: {uppercasedFullName}
</p>
</div>
</lightning-card>
</template>
//LWC_GetterExample.js
import { LightningElement } from 'lwc';
export default class HelloExpression extends LightningElement {
firstName = '';
lastName = '';
handleChange(event){
console.log(event);
console.log(event.target);
const Field=event.target.name;
if(Field==='firstName'){
this.firstName = event.target.value;
}
if(Field==='lastName'){
this.lastName = event.target.value;
}
}
get uppercasedFullName() {
return `${this.firstName} ${this.lastName}`.trim().toUpperCase();
}
}
How can we render UI Conditionally?
To render HTML conditionally, add the if:true|false directive to a nested <template> tag that encloses the conditional content.
<!--LWC_ConditionalUI.html-->
<template>
<lightning-card>
<div>
<lightning-input type="checkbox"
label="Show details"
onchange={handleChange}>
</lightning-input>
<template if:true={showDetail}>
<div>
These are the details!
</div>
</template>
</div>
</lightning-card>
</template>
//LWC_ConditionalUI.js
import { LightningElement } from 'lwc';
export default class LWC_ConditionalLogic extends LightningElement {
showDetail=false;
handleChange(event){
this.showDetail = event.target.checked;
}
}
How Iteration(loops) in Lightning Web Components?
There are two ways through which you can display a list in LWC.
for:each
iterator
for:each
<!--LWC_foreachExample.xml-->
<template>
<lightning-card>
<template for:each={contacts} for:item="contact">
<li key={contact.Id}>
{contact.Name}, {contact.Title}
</li>
</template>
</lightning-card>
</template>
//LWC_foreachExample.js
import { LightningElement } from 'lwc';
export default class LWC_ForEachExample extends LightningElement {
contacts = [
{
Id: 1,
Name: 'Manoj',
Title: 'VP of Engineering',
},
{
Id: 2,
Name: 'Michael',
Title: 'VP of Sales',
},
{
Id: 3,
Name: 'Jennifer',
Title: 'CEO',
},
];
}
Iterator
The difference between for:each and iterator is that you can directly access the first and last element of the list any time.
Use iteratorName to access these properties:
value—The value of the item in the list. Use this property to access the properties of the array. For example,iteratorname.value.propertyName.
index—The index of the item in the list.
first—A boolean value indicating whether this item is the first item in the list.
last—A boolean value indicating whether this item is the last item in the list.
<template>
<lightning-card>
<template iterator:it={contacts}>
<li key={it.value.Id}>
<div if:true={it.first} class="list-first"></div>
{it.value.Name}, {it.value.Title}
<div if:true={it.last} class="list-last"></div>
</li>
</template>
</lightning-card>
</template>
No comments:
Post a Comment