Lightning Web Components Public Properties

Let us discuss here how to use public properties in the Lightning web components. To expose a public property, decorate it with @api. An owner component that uses the component in its markup can access the component’s public properties. Public properties are reactive. If the value of reactive property changes, the component’s template rerenders any content that references the property. Please refer this link to trackable properties 

 

You can able to use public properties in

  • passing the property values from the parent component
  • Set the values from the App Builder
  • Expose the properties to App builder.

Let’s start with the simple example. create a new lightning web component using the following sfdx command

Here is the source.html code

Here is the Source.js controller class

Now create a new web component from where we will be invoking this source component. create new lightning web components using the below sfdx command

Here is the target.html code

Here is the target.js-meta.xml configuration file

Now if you see the output it will show Hello, world means the property which you set from the target component is not reflected. Now to reflect the property we need to make the world property as public

Now Let’s discuss here how to make this property as Public Properties

To mark a property as public, annotate it with the @api decorator.When you use the @api decorator, you must import it explicitly from lwc. For example:

Now update the Source.js controller as shown below

save the changes and refresh the page. now you can able to see the property values are passed from the parent component as shown below and the values are updated based on the parent component values.

 

Update the target.html code as below and you can able to see the property values are passed from the parent component.

 

Another usage of the public properties is you expose those properties to app builder. If you want to expose the properties to app builder you need to make properties as-as public by using @api .Now go and add the Source.html to app builder and you can able to configure the message properties values from the app builder as shown below.N ow update the source.js-meta.xml as shonw below.

 

 

You can able to configure now the word proper from the lightning app builder as shown below.

 

 

 

 

 

Tracked Properties in Lightning web component

Let us understand how to use the Tracked Properties in Lightning web components. To track a private property’s value and re-render a component when it changes, decorate the property with @track.Tracked properties are also called private reactive properties. Modern JavaScript framework is supporting “reactive,” properties which mean it can automatically refresh your data when changes have happened to the property and what does mean “private reactive “.private reactive means the data changes are atomically refreshing on the UI and not exposed to the other components or an app builder.These properties are strictly inside the component. Now let us understand the ways you can take advantage of this in your apps. You can use a tracked property directly in a template. You can also use a tracked property indirectly in a getter of a property that’s used in a template. Refer this link for development environment setup

Create a Lightning web component using the SFDX command

Here is the simple component that will show the message on the UI using the JavaScript property

Here is the TrackedProperties.html code

Here is the TrackedProperties.js code

Here is the TrackedProperties.js-meta.xml

Push changes to scratch org and add the changes to record page .you can able to see as shown below.

Now when you click on update message the property is updated in JavaScript controller but the changes won’t update in the UI. You can able see the below message in chrome console when you click on “Update Message”

You can able to make the property trackable by using the track decorator .Import @track from the lwc module. This decorator is unique to the Lightning Web Components programming model.

You can use @track to decorate a property only; you can’t use it to decorate an object. You can decorate multiple properties with@track, but each property can have only one decorator. For example, you can’t decorate a property with both @track and @api. Let’s update the same code with the @track decorator which will reflect the changes to UI on button click.

update the JavaScript controller as shown below

Now when you click on the Update message you can able to see the result changes on the UI

Now let us make some more changes to make the @track property looks like a two-way data binding.

Update the TrackedProperties.html code as shown below

Update the JavaScript Controller as shown below

Now when you enter any text in input box the message will update like two-way binding as shown below

Now let’s look at sample code with a parent component passing property to a child component. This example will display the progress bar from the enter input number and we have two components here chartBar,apiProperty.

create a new lightning web component using the following SFDX command

Use this code in chartBar.html

Here is the chartBar.css

Now, let’s call this chartBar.html code from the parent component. now create a new lightning web component using the following SFDX syntax.

use this code in apiProperty.html

Use this code in the apiProperty.js class

 

Use this code in apiProperty.js-meta.xml

Push changes to scratch org and add apiProperty.html code to the record page .you can able to see the output as shown below

 

The c-api-property component uses its tracked percentage property to pass a value down to the public percentage property on its child c-chart-bar component. Components that consume c-api-property can’t get or set its percentage property because tracked properties are private.Its you want to make it as public property you need to use the @api decorator .

 

 

 

 

 

 

 

 

 

 

,

 

 

 

 

 

 

 

 

Lightning Web Component Tree Example

Let us discuss here how to use the Lightning Web Component Tree. A lightning-tree component displays the visualization of a structural hierarchy, such as a sitemap for a website or a role hierarchy in an organization. Items are displayed as hyperlinks and items in the hierarchy can be nested. Items with nested items are also known as branches.

please refer this link to Lightning web component environment setup.

1.Create Apex Class 

Use the following SFDX command to create apex class

Here is the apex code

2.Create a Lightning Web Component 

Create a Lightning web component using the following SFDX command.

Here is the TreeEx3.html code

Here is the TreeEx3.js JavaScript controller code

Here are the TreeEx3.js-meta.xml configuration file

 

3. Push changes to scratch org. 

Push changes to scratch using this command and add this component to record page using lighting app builder.

After adding the lightning web component to record page using the app builder. you can able to see the tree as shown below

 

 

 

Lightning Web Component Tree Grid

Let us discuss here how to use  Lightning Web Component Tree Grid.A lightning-tree-grid component displays hierarchical data in a table. Its appearance resembles lightning-datatable, with the exception that each row can be expanded to reveal a nested group of items. Rows that contain nested data display a chevron icon to denote that they can be expanded or collapsed. This visual representation is useful for displaying structured data such as account hierarchy or forecasting data. Each column’s formatting is determined by its data type. For example, a phone number is displayed as a hyperlink with the tel: URL scheme by specifying the phone type. The default type is text .

Please refer to this link for Lightning web component environment setup 

 

1.Apex Class 

Create an apex class using the below SFDX command

Use this apex code in the TreeGrid Class

 

2. Create a Lightning web component 

Create a lightning web component using this below SFDX Command

Here is the code for TreeGrid.html

Here is the TreeGrid.js JavaScript controller

Here are the TreeGrid.js-meta.xml configuration files

3.Push Changes to scratch org 

Now push the changes to scratch org using this SFDX command

Add this component to the record page using the lightning app builder. After adding to the record page you can able to the Tree grid as shown below

 

 

 

Lightning Web Component Google Maps

Let us discuss here how to use the Google maps with Lightning Web Component Map. A lightning-map component displays a map of one or more locations. To display maps Pass the location to be displayed via the component’s map-markers property. map-markers is an array of markers that indicate location. A marker contains

  • Location Information: This can be a coordinate pair of latitude and longitude or an address composed of address elements.
  • Descriptive Information: This is information like title, description and an icon which is information relevant to the marker but not specifically related to location.

The location information supports the following address elements: City, Country, PostalCode, State, and Street. Note that to support reliable geocoding of addresses, if Street is specified then at least one of City, Country, PostalCode or State must be specified. Here’s an example of a marker that uses address elements.

 

Here’s an example of a marker that uses coordinates for latitude and longitude.

 

For each map marker in the array of map markers, provide either latitude and longitude coordinates or address elements. If you specify both in a single marker, latitude and longitude get precedence.

When displaying a list of addresses, you must also pass the markers-title property, which displays a heading for your locations.

1.Create an Apex Class

The following apex class will get the account location information and pass it to the web components. Use the following SFDX command.

Here is the code

2. Create a Lightning Web component 

Create a lightning web component to display the map. use this SFDX command to create a web component.

Here is the MapEx.html code

Here is the MapEx.js JavaScript controller code

Here is the MapEx.js-meta.xml configuration file

3.Push Changes to scratch org 

Now push the changes to scratch org using this below command.

Add this web component to the record page and you can able to see the map as shown below.