Lightning Web Component: Render elements conditionally

to render HTML conditionally we will use if:true|false directive.


Directives are special HTML attributes that add dynamic behavior to HTML templates. below are the list of directive: 

1. for:each={array} : use this directive to iterate over an array and render a list.

2. for:item= "currentItem" : Use this directive to access the current items where currentItem is an identifier that model injects into the current scope.

3. for:index="index" : Use this directive to access the current item's zero-based index where  index placeholder is a new identifier that the model injects into the current scope.

4. if:true|false={expression} : Use this directive to conditionally render DOM elements in a template. The expression can be a JavaScript identifier (for example, person) or dot notation that accesses a property from an object (person.firstName). The engine doesn’t allow computed expressions (person[2].name['John']). To compute the value of expression, use a getter in the JavaScript class.

5. iterator:iteratorName={array}: Use this directive to apply special behavior to the first or last item in an array and render a list.  Access these properties on iteratorName

• value : the value of item in the list (iteratorName.value.propertyName).
• index : The index of item in the list.
• first : A boolean value indicating whether this item is the first item in the list.
• last : A boolean value indicating whether this item is the last item in the list.

6. key={uniqueId} : Use this directive to improve rendering performance by assigning a unique identifier to each item in a list. The key must be a string or a number, it can’t be an object. The engine uses the keys to determine which items have changed.

7. lwc:dom="manual" : Add this directive to a native HTML element to call appendChild() on the element from the owner’s JavaScript class and preserve styling. If a call to appendChild() manipulates the DOM, styling isn’t applied to the appended element.

Now back to topic
if:true|false={property} directive binds data to the template and removes and inserts DOM elements based on whether the data is true or false.

Below code hide and show a section when user selects or deselects the checkbox.

Reference: Lightning Web Component Guide