Example
Unlike show.bind when using if.bind the element will be removed from the page if the supplied binding value is false or added into the page if the value is true.
export class MyViewModel {
isVisible = false;
}
<template>
<div if.bind="isVisible"><strong>If you can read this, I am still here.</strong></div>
</template>
Grouped Elements
Sometimes there might be a situation where you want to add or remove a whole group of elements at once. For this, we can use a <template> element to show or hide additional elements without the need for a placeholder element like a DIV.
export class MyViewModel {
hasErrors = false;
errorMessage = '';
}
<template if.bind="hasErrors">
<i class="icon error"></i>
${errorMessage}
</template>
