Sunday, December 29, 2019

Handling lightning-input in lightning web component

.html file:


<template>
    Name is:  - {fname}
    <br />
    <lightning-input type="text" value={fname} onchange={handleChange} ></lightning-input>
</template>

Handling lightning-input in lightning web component

.js file:


/* eslint-disable no-console */
import {
   LightningElement,
   track
} from 'lwc';

export default class webcomp4 extends LightningElement {
   @track fname = "Farukh Haider";
   handleChange(event) {
       this.fname = event.target.value;
       console.log('Name change ' + this.fname);
   }

}

Handling lightning-input in lightning web component


.xml file

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="webcomp4">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
</LightningComponentBundle>

lightning-input in lightning web component


Output:


lightning-input in lightning web component



lightning-input in lightning web component

No comments:

Post a Comment