Why do I have to decorate private (@track) with @api in this code

 @api showCart = false;
 @api showMe() {
    this.showCart = true;

without @api decoration I've got an error means that 'There is no property showCart in component'

Can anyone explain me some details about this?


As per documentation: If this property needs to be accessible by a parent component and other sibling components, it needs to be @api enabled. This also means the value of the property is going to be listening for changes.

"To expose a public property, decorate it with @api. Public properties define the API for a component. 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 a reactive property changes, the component rerenders. When a component rerenders, all the expressions used in the template are reevaluated. See Public Properties. To expose a public method, decorate it with @api. Public methods are part of a component’s API. To communicate down the containment hierarchy, owner and parent components can call JavaScript methods on child components."

| improve this answer | |
  • Does it mean that if i want to call showMe() method from parent i have to (in my case) always decorate showCart with @api? – pincet Dec 24 '19 at 18:11

Decorators are simply functions that are prefixed with @symbol and placed immediately before the code being decorated.

@api decorator

It provides public property It provides reactive property Use this decorator to expose public property of a web component.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.