Getting Value from UI

Template

Scenario 1:

<template>

    Hello, {greeting}!

</template>

JS

import { LightningElement } from 'lwc';

export default class Hello extends LightningElement {

    greeting = 'World';

}

O/p

Scenario: 2 Hello world with Input Box 

<template>

    <lightning-card title="HelloBinding" icon-name="custom:custom14">

        <div class="slds-m-around_medium">

            <p>Hello, {greeting}!</p>

            <lightning-input

                label="Name"

                value={greeting}

                onchange={handleChange}

            ></lightning-input>

        </div>

        <c-view-source source="lwc/helloBinding" slot="footer">

            Change the value of a bound property when the value of an input

            field changes. Type something in the input field to see the recipe

            in action.

        </c-view-source>

    </lightning-card>

</template>

import { LightningElement } from 'lwc';

export default class HelloBinding extends LightningElement {

    greeting = 'World';

    handleChange(event) {

        this.greeting = event.target.value;

    }

}

o/p:

Hello, test!