Decorators

Decorators are a JavaScript language feature. There are 3 decorators available in the Lightning Web Components programming paradigm for adding functionality to property or function.

A Decorator is a type of declaration that can be added to a property, or function. ECMAScript includes the ability to build decorators, but these three decorators are exclusive to Lightning Web Components.

1. @api

To expose a public property, use @api to decorate a field. Public properties define the API for a component.

What exactly is public property?

Public properties are visible in the composition and the parent component can set the value for the properties defined in the child component.

Public properties used in a template are reactive. If the value of a public property used in a template changes, the component re-renders.

An owner component that uses a component in its markup can programmatically access the component’s public properties via DOM properties.

myGreetings = this.template.querySelector('c-child-component').greetings;

Public method

Decorate a public method with @api to make it visible. Public methods are part of a component’s API. Owner and parent components can call JavaScript methods on child components to communicate down the containment hierarchy.

Call Methods on Child Components

The above component code can be found here.

2. @track

When the value of a field changes and the field is used in a template or a getter of a property used in a template, the component rerenders and displays the new value. When you assign an object or an array to a field, the framework notices some changes to the object or array’s internals, such as when you assign a new value.

Decorate a field with @track to instruct the framework to monitor changes to an object’s properties.

3. @wire

A reactive wire service is used by Lightning web components to read Salesforce data. The component re-renders when the wire service provides data. Components use @wire in their JavaScript class to specify a wire adapter or an Apex method.