0

Hi I need to iterate the template in the HTML on the basis of certain condition/Values in the Javascript For example if values in the variable first ='Youth' then the first template should get displayed and if the value by the user input changed to = 'Old' then the second template should get displayed:--

Code JS and HTML

import { LightningElement, api,track } from 'lwc';



export default class ccdeatails extends LightningElement {

    @track first = 'Youth';
    
    //on the basis of user input it gets changed to 'old '
 
}

HTML

<template if:true ={Youth}>
    <div>This is for Youth</div>
</template>

<template if:true {old}>
     <div>This is for old</div>
</template>

Kindly someone help me out for this.not able to get this... if the values

2
  • Hi Trang, Welcome to SFSE! Please help yourself by visiting How to Ask page and edit your question to add more details and what you have tried so far. Sep 14, 2020 at 14:50
  • @rahul ....Sorry i have updated the question
    – Trang
    Sep 14, 2020 at 15:17

1 Answer 1

0

You don't need two properties here. Just write one getter to function to set the visibility conditionally.

get isFirst(){
    return this.first === 'Youth' ? true : false;
}

In the HTML

<template if:true={isFirst}>
    <div>This is for Youth</div>
</template>

<template if:false={isFirst}>
    <div>This is for old</div>
</template>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.