Lesson: 15 | Render DOM Elements Conditionally

To render HTML conditionally, add the if:true|false directive to a nested <template> tag that encloses the conditional content.

fullName.html

<template>
    <div if:true={status}>Show this when status is true</div>
    <div if:false={status}>Show this when status is false</div>
</template>

fullName.js

import { LightningElement } from 'lwc';

export default class conditionalRendering extends LightningElement {
    status=false;
}

More Examples;

HTML

<template>
    <template if:true={display}>
        <lightning-card title="Student Information">
            <div class="slds-n-around_medium">
                <lightning-input label="First Name" value={name} onchange={firstNameHandler}></lightning-input>
                <lightning-input label="Last Name" value={age} onchange={lastNameHandler}></lightning-input>
                <lightning-input label="Grade" value={salary} onchange={gradeHandler}></lightning-input>
                <lightning-input label="Roll Number" value={salary} onchange={rollNumberHandler}></lightning-input>
                <lightning-button label="Save" onclick={saveButtonHandler}></lightning-button>
            </div>
        </lightning-card>
        
    </template>
    <template if:false={display}>
        <lightning-card title="Student Information">
            <div class="slds-m-around_medium">
                <p>First Name: {firstName}</p>
                <p>Last Name : {lastName}</p>
                <p>Grade : {grade}</p>
                <p>Roll Number : {rollNumber}</p>

            </div>


        </lightning-card>

    </template>
</template>

JavaScript

import { LightningElement,track } from 'lwc';

export default class EmployeeInfo extends LightningElement {
  @track firstName;
  @track lastName;
  @track grade;
  @track rollNumber;
  @track display=true;

  firstNameHandler(event)
  {
      this.firstName=event.target.value;
  }
  lastNameHandler(event)
  {
      this.lastName=event.target.value;
  }
  gradeHandler(event)
  {
      this.grade=event.target.value;
  }
  rollNumberHandler(event)
  {
      this.rollNumber=event.target.value;
  }
  saveButtonHandler()
  {
      this.display=false;
  }

}

HTML

<template>
    <lightning-card title="Conditional Rendering" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <lightning-input type="checkbox" label="Show Name" onchange={handleChange}></lightning-input>
            <template if:true={showName}>
                <div class="slds-m-vertical_medium">
                    My name is John Carter.
                </div>
            </template>
        </div>
    </lightning-card>
</template>

JavaScript

// helloConditionalRendering.js
import { LightningElement } from 'lwc';

export default class HelloConditionalRendering extends LightningElement {
    showName = false;

    handleChange(event) {
        this.showName = event.target.checked;
    }
}

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

Mastered by 29 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

Lesson: 15 | Render DOM Elements Conditionally

fullName.html

fullName.js

HTML

JavaScript

Video

HTML

JavaScript

Preview

Video

Lightning Web Components

Login to your account

Lesson: 15 | Render DOM Elements Conditionally

fullName.html

fullName.js

HTML

HTML

Lightning Web Components