Compártelo con tus amigos!

Las plantillas en Lightning Web Component nos permiten mostrar el HTML de un component en un navegador. Además, utilizan el DOM virtual para representar componentes de manera inteligente y eficiente.

¿Cómo Funciona una Plantilla en Lightning Web Component?

Las plantillas en Lightning Web Component utilizan el DOM virtual para poder mostrar componentes. Así mismo, una plantilla valida tiene como etiqueta raíz a <template>.

Cuando se procesa un componente, la etiqueta <template> se reemplaza con su nombre <namespace-component-name>. Por ejemplo, en la consola del navegador, un componente con la plantilla myComponent.html se representa como <c-my-component>, donde c es el espacio de nombres predeterminado.

¿Cómo Mostrar Propiedades en una Plantilla de Lightning Web Component?

  • Para mostrar propiedades en una plantilla, rodeamos la propiedad con llaves, {propiedad}.
  • En caso se tenga que calcular un valor de la propiedad para mostrar en la plantilla, podemos usar un método getter en la clase Javascript del componente.
  • En la plantilla, la propiedad puede ser un identificador de JavaScript (por ejemplo, persona) o una notación de puntos que accede a una propiedad desde un objeto (persona.nombre).
  • Lightning Web Component no permite usar expresiones como persona [2] .nombre [‘John’].
  • Una propiedad usada en una plantilla debe contener un valor primitivo, excepto cuando se usa en una directiva for: each o iterator.

En el siguiente ejemplo, mostraremos una propiedad llamada ‘nombre’ en una plantilla y un input que permitirá cambiar el valor de dicha propiedad.

<template>
    <p>Hola {nombre}!</p>
    <lightning-input label="Name" value={nombre} onchange={handleChange}></lightning-input>
</template>
import { LightningElement } from 'lwc';

export default class HelloComponent extends LightningElement {
    nombre = '';
    handleChange(event) {
        this.nombre = event.target.value;
    }
}

¿Cómo Mostrar una plantilla en Lightning Web Component según una condición?

Para mostrar HTML de una plantilla en Lightning Web Component según una condición, agregamos la propiedad if: true o if:false a una etiqueta <template> anidada que encierra el contenido condicional.

La propiedad if: true | false = {property} vincula datos a la plantilla y elimina e inserta elementos DOM basándose en una condición que puede ser verdadero o falso.

En el siguiente ejemplo, una plantilla contiene un checkbox llamado ‘Mostrar mensaje’. Cuando un usuario selecciona o anula el checkbox, la función handleChange establece el valor de la propiedad areMessageVisible.

<template>
    <div class="slds-m-around_medium">
        <lightning-input type="checkbox" label="Mostrar Mensaje" onchange={handleChange}></lightning-input>
        <template if:true={areMessageVisible}>
            <div>Snake on Code!</div>
        </template>
    </div>
</template>
import { LightningElement } from 'lwc';

export default class MessageComponent extends LightningElement {
    areMessageVisible = false;
    handleChange(event) {
        this.areMessageVisible = event.target.checked;
    }
}

Más Información

Para saber más sobre Salesforce, puedes visitar nuestro post sobre Excepciones de Apex en Salesforce.

(Visited 71 times, 1 visits today)

Compártelo con tus amigos!

Close