Basics of Lightning Web Component
- @track :- If the property’s value changes, the component rerenders for track.It is private and can be set by within component.Any value updation within component is updated at every single place where we have used that attribute’s value and after that it refreshes the component to reflect our changes.
- @api :- If the property’s value changes, the component rerenders. @api are public and can be set by another component.To reflect the changes made in different component whether it is in child-parent relationship or sibling relationship, we have to use @api annotation.
Note: Think of @track and @api as private and global variable where @track has scope within same component and any changes in Js file will be reflected in html as soon as value changes(only this component refreshes to show new value. )@api do same task globally i.e it has access from other components as well with condition that components must be linked.
- When writing below example in your VSCode try to run code with and without annotation to note the difference.Trust me it is worth it.You will note that value is changing on alert but not changing in your component.This is the beauty of track or api.
Reason:Component did not refresh when your onclick event executes.Awesome right :)
- @wire :- Now wiring is little tricky concept not hard but little tricky when it comes to understanding when to use wire to make an optimized code. We will talk in detail in other blog. I will update the link.
But for now, lets get few things at tips.
@wire :-The wire service will allows us to connect our component to send and retrieves data only in case when there is changes to the values stored in cache. If there is data in the client cache, there will be no network request.
Now after understanding how the basic properties come handy and lets see how we can import/export methods, functions from other components.It is very simple.There are some some methods like pub-sub utilities.(don’t worry I will discsuss pub-sub in other blog) where some methods u need to use to fire events and handle it in some other controller.Or,There are classes from where you need to send and retrieve data to make call to your server side controller. In these cases Import export methods come in handy.In below example Iam importing Account data depending upon filter criteria.Below code will make concepts clear about implementation.OTHER COMPONENT HTML CODE<template><c-lwc-properties newbrandname={'newbrandname'}></c-lwc-properties></template>lwcProperties Component :-lwcProperties HTML code:<template><p>{trackedValue}</p><lightning-button label="Change Brand Name"onclick={handleValue}></lightning-button></template>lwcProperties JS code:import { LightningElement,track,api,wire } from 'lwc';import getAccountList from '@salesforce/apex/dataTableAccount.getAccountList';//importing brand data from dataTableBrandsexport default class LwcProperties extends LightningElement {@track trackedValue = 'Adidas';@api newbrandname;handleValue(){this.trackedValue = 'Puma';alert('BrandName is ' + this.trackedValue);}//wiring to dataTableBrands class which fetches value from custom Brands// objects.@wire(getAccountList, { filterAppendValue:'$filterAppendValue' }) Account({data}){if(data){window.console.log('data length : '+ data.length);// We can store Account data in a variable to track changes and// display in data table.// Click on below link to check for lightning data table in Lightning// Web Component.}}get style() {return 'width: ${this.newbrandname}%';}}
public with sharing class dataTableAccount{
@AuraEnabled(cacheable=true)
public static List<Account> getAccountList(String filterAppendValue) {
if(filterAppendValue!=''){
return [SELECT Id, Name, email FROM Account
where Name=: filterAppendValue LIMIT 10];
}
else{
return [SELECT Id, Name, email FROM Account LIMIT 10];
}
}
