I am learning about Lightning Web Component LWC. I want export more than one class in the same component and use a property declared in another than default export class in the same Web Component. Let's see example code:
App.html
<template>
<div id="waiting" if:false={ready}>Loading…</div>
<div id="display" if:true={ready}>
**<div>Name: {AdditionalClass.name}</div>**
<div>Description: {description}</div>
<lightning-badge label={category}></lightning-badge>
<lightning-badge label={material}></lightning-badge>
<div>Price: {price}</div>
<div><img src={pictureUrl}/></div>
</div>
and see .js file:
App.js
import { LightningElement } from 'lwc';
export default class MyBikeasdasf extends LightningElement {
name = 'Electra X4';
description = 'A sweet bike built for comfort.';
category = 'Mountain';
material = 'Steel';
price = '$2,700';
pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
ready = false;
connectedCallback() {
setTimeout(() => {
this.ready = true;
}, 3000);
}
}
export class AdditionalClass extends LightningElement {
name = 'CUSTOM ITEM';
}
How Can use a property name from AdditionalClass in App.html?