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.