Decorator Api en Salesforce

El Decorator Api en Salesforce nos ayuda a convertir un campo en público.

En Lightning Web Component (LWC), el Decorator Api se utiliza para hacer un campo o propiedad público. Todos los campos usados, incluidos los públicos, son reactivos en un componente. Esto quiere decir que, si un campo público cambia de valor, el componente se volverá a renderizar.

¿Para qué Sirve el Decorator Api en Salesforce?

El decorator Api agrega la funcionalidad de ser público a un campo o propiedad.
Los campos públicos definen la API de un componente.
Todos los campos públicos son reactivos. Esto significa que si un valor en la plantilla cambia, el componente se volverá a renderizar.
El valor de un campo público puede ser establecido por el componente padre. Esto quiere decir que, el componente que llama a otro, el cual contiene campos públicos, puede establecer los valores de estos.

¿Cómo se Declara un Campo Público?

Para declarar un campo o propiedad público en Lightning Web Component, se agrega la palabra reservada @api.

@api nombre='';

¿Para qué se Usa un Campo Público?

Un campo público se usa para:

Pasar los valores del campo público desde el componente padre.
Establecer los valores del campo público desde el App Builder.
Mostrar los campos o propiedades públicos al App Builder.

¿Cuándo usar el Decorator Api en Salesforce?

El decorator Api en Salesforce lo usamos para declarar campos o propiedades públicos en un componente. Así mismo, un campo puede tener solo un decorator.

En el siguiente ejemplo, se lista a los integrantes de un equipo en un proyecto. El componente ‘TeamMember’ tiene definidos los campos públicos ‘name’ y ‘teamRole’.

// teamMember.js
import { LightningElement, api } from 'lwc';
export default class TeamMember extends LightningElement {
    @api name = '';
    @api teamRole = '';
}

Además, los valores de los campos públicos ‘name’ y ‘teamRole’ se muestran en la plantilla.

<!-- teamMember.html -->
<template>
    <div class="view">
        <label>Mi nombre es {name}.</label>
        <label>Soy {teamRole} del proyecto.</label>
    </div>
</template>

La clase Javascript y la plantilla de HTML definen al componente ‘c-team-member’. El componente que invoque a ‘c-team-member’ puede establecer los valores de los campos públicos ‘name’ y ‘teamRole’ a través de las propiedades de DOM.

<!-- teamProject.html -->
<template>
    <div class="listing">
        <c-team-member name="Luz" team-role="Developer"></c-team-member>
        <c-team-member name="Mario" team-role="QA"></c-team-member>
    </div>
</template>