aurelia Binding Conditionally Add or Remove a HTML Element

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

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>


Got any aurelia Question?