Lesson: 13 | Getters

Notes
Video

Notes

In this example, a user enters their first and last name. A JavaScript getter computes a new value, uppercasedFullName, and the template renders it.

The fullName property in the template is bound to the get fullName() getter in the JavaScript class.

fullName.html

<template>
        <lightning-input name='firstName' label="First Name" onchange={firstNameHandler}></lightning-input>
        <lightning-input name='lastName' label="Last Name" onchange={lastNameHandler}></lightning-input>
        <p>Full Name: {fullName}</p>
</template>

fullName.js

import { LightningElement } from 'lwc';

export default class FullName extends LightningElement {
    firstName = '';
    lastName = '';

    firstNameHandler(event){
        this.firstName=event.target.value;
    }
    lastNameHandler(event){
        this.lastName=event.target.value;
    }

    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

Prev You need to login to have access to the quizzes. Next

Mastered by 33 users.

Lightning Web Components

A. Component Reference (27 lessons)

B. Lightning Web Components | Utilities (11 lessons)

C. Lightning Web Component Guide (41 lessons)

D. Java Script Methods for LWC (23 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Login to your account

Lesson: 13 | Getters

Notes

fullName.html

fullName.js

Lightning Web Components