LWC Basic

           

In this topic we will cover some basic functionality of Lightning Web Component (LWC)

Topic Cover

• Two way binding
• @track
• Getter
• Conditional Rendering
• Render List of Item
• Component Composition
• Access Element in DOM

Two Way Binding

Two way binding used to pass value from controller to template, and if there is any changes in template, it pass back to controller and update the value. After Spring 20, by default all fields in JS are treated as reactive.

@Track 

If a field is assigned an object or an array, the framework observes some changes to the internals of the object or array, such as when you assign a new value. To tell the framework to observe changes to the properties of an object, decorate the field with @track.

Getter

Lets say you have some property in JS and if you want to execute some expression it’s not allowed in LWC, to overcome with situation we use “Getter”. In Getter we perform some JS operation and it will binding into our html template. Getter always something “Return”.

Conditional Rendering

Based on condition, you can render property in html template. lwc:if, lwc:elseif, and lwc:else are used in conditional Rendering, before that it was if:true and if:false.

Render List of item

for:each

When using the for:each directive, use for:item="currentItem" to access the current item. This example doesn’t use it, but to access the current item’s index, use for:index="index".
1. for:each takes the array as an input 
2. for:item = ”currentItem” currentItem is the value of the current element. currentItem is an alias and can be anyname. for:item holds the currentItem. 
3. for:index = ”index” index is the current element index in the array. for:index holds the index.

iterator

To apply a special behavior to the first or last item in a list, use the iterator directive, iterator:iteratorName={array}. Use the iterator directive on a template tag.

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.

Component Composition

It’s useful to compose apps and components with a set of smaller components to make the code more reusable and maintainable.
Adding component within the body of another component. when you wanna embedded child component into parent component then we use component composition.

Syntax:- childComponent = “<c-child-component> </c-child-component>”

Access Element in DOM

To access elements rendered by a component with standard DOM APIs, use querySelector() with this.template or this. To locate elements in the DOM without a selector, use refs.
In case if you wanna set attribute dynamically, you can use setAttribute() method to add attribute dynamically.

querySelector()

querySelectorAll()

If you have multiple elements then you can use querySelectorAll() method to fetch all elements.
remember:- querySelectorAll() always return nodeList, to convert into Array form, use Array.from()

Refs

Refs locate DOM elements without a selector and only query elements contained in a specified template. First, add the lwc:ref directive to your element and assign it a value. To call that reference, use this.refs.

Follow me on LinkedIn and Twitter for such more related post