Migrate Conditionals (Aura to LWC)

Hi,
We are going to learn how we can migrate conditionals from Aura to LWC.

In Aura we use <aura:if>  for conditional rendering.

In LWC we use "if:true" and "if:false".

Let's look into the following snippets.


Aura:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
 <aura:attribute name="isShow" type="boolean"/>
 <aura:if isTrue="{!v.isShow}">
  <div>Conditional Code</div>
  <aura:set attribute="else">
   <div>Conditional Code</div>
  </aura:set>
 </aura:if>
</aura:component>

Here "isShow" is an attribute name in an Aura component.


LWC(Lightning web component):

<template>
    <div if:true={isShow}>Conditional Code</div>
    <div if:false={isShow}>Conditional Code</div>
</template>

import { LightningElement } from 'lwc';
export default class MyComponentName extends LightningElement {
    isShow = true;
}

Here "isShow" is JavaScript property in the LWC JavaScript file.


Reference:
Salesforce Techbook 
https://www.youtube.com/watch?v=G7oJDD6RMWU&list=PL-JzyFWuCbkKcFSOCRlCUk79YbET5QvZC (Lightning Web Components)
https://www.youtube.com/watch?v=MHJASW7DN9w&list=PL-JzyFWuCbkKk0c6WqDdFrjev-wD0SndG(Aura Components)
https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.migrate_conditionals