Get started with Simple Lightning Web Component(Bike Card)

Lightning web component HTML files all include the template tag. The template tag contains the HTML that defines the structure of your component. Let’s look at the HTML for a simplified version of the component.

Paste the following into app.html (replacing any existing HTML in the file).

bikeCard.html

<template>

<div id="waiting" if:false={ready}>Loading..</div>

<div id="dispaly" if:true={ready}>

<div>Name: {name}</div>

<div>Description: {description}</div>

<div>Category: {category}</div>

<div>Material: {material}</div>

<div>Price: {price}</div>

<div><img src={pictureURL}/></div>

</div>

</template>

The identifiers in the curly braces {} are bound to the fields of the same name in the corresponding JavaScript class.
Here’s a JavaScript file to support this HTML. Paste this into bikeCard.js.

bikeCard.js

import {LightningElement} from 'lwc';

export default class bikeCard extends LightningElement{

name = 'Hero';

description = 'A nice bike build for comfort';

category = 'BiCycle';

material = 'Steel';

price = '100000';

pictureURL = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';

ready = false;

connectedCallback(){

setTimeout(() =>{

this.ready = true;

}, 3000)

}

}

bikeCard.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

<apiVersion>48.0</apiVersion>

<isExposed>true</isExposed>

<targets>

<target>lightning__AppPage</target>

<target>lightning__RecordPage</target>

<target>lightning__HomePage</target>

</targets>

</LightningComponentBundle>
The component configuration file with the extension .js-meta.xml. This file provides metadata for Salesforce, 

including the design configuration for components intended for use in Lightning App Builder.
Required
apiVersion binds the component to a Salesforce API version.
isExposed (true or false) makes the component available from other namespaces. 
Only set this to true to make a component usable in a managed package or by Lightning App Builder in another org.

Optional
targets specify which types of Lightning pages the component can be added to in the Lightning App Builder.
targetConfigs let you specify behavior specific to each type of Lightning page, 
including things like which objects support the component.

The Preview now shows a bike with some details.

Preview: