Switching content in LWC with radio group?

Question

I have this radio group which should work in that if I select the top option, the first two rows are shown only, and if I select the bottom option, the last row is only shown. How can I create this dynamic sort of tab selection within LWC?

Answer 1

What you're looking for is documented here : https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_conditional

This will looks something like this:

<template if:true={topIsSelected}>
   <!-- first top two rows -->
</template>
<template if:true={bottomIsSelected}>
   <!-- last row -->
</template>