How to Iterate the values in HTML in template

Question

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

Answer 1

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>