Conditionals

conditionally show information in templates using if, unless, and else helpers.

Summary

Handlebar templates include if else and unless conditional helpers. These helpers can be invoked as block or inline helpers.

Block Usage

Conditional statements can be invoked in block format to show blocks of HTML if the conditional statement evaluates to true. In the example below, the severity property will only be displayed if it is present.

{{#if block.data.details.severity}}
   <span>Severity: {{block.data.details.severity}}</span>
{{/if}}

The {{if}} helper tests for truthiness. This means that the condition will be true except when it is false, undefined, 0, [], or null.

The inverse of the if helper is the unless helper.

{{#unless block.data.details.severity}}
   <span>No Severity Level Found</span>
{{/unless}}

Both the if helper and unless helper can use the else helper.

{{#if block.data.details.severity}}
    <span>Severity: {{block.data.details.severity}}
{{else}}
    <span>No Severity Level Found</span>
{{/if}}

Inline Usage

Conditional helpers can also be used inline. When using the helper inline, no # sign is needed.

<div>
    {{if block.data.details.isActive "Active" "Not Active"}}
</div>

In the example above, the <div> will display the string Active if the boolean value isActive is true. Otherwise, if isActive is false the string Not Active will be displayed.

Inline conditional helpers can be used to conditionally add CSS classes to your template.

<span class={{if block.data.details.isActive "green" "red"}}></span>

Oftentimes you will combine this inline conditional usage with truth helpers.

template.hbs

<span class={{if (gt block.data.details.severity 50) "red" "green"}}>
    {{block.data.details.severity}}
</span>

style.less

.red {
    color: #ff0000;
}

.green {
    color: #00ff00;
}

In the example above, the severity level will be displayed using the red CSS class if the severity value is greater than 50, otherwise the severity level will be displayed using the green CSS class. These CSS classes might set the color attribute on the text.

For more detailed information on conditional helpers please see the Ember handlebars guide located here https://guides.emberjs.com/v3.4.0/templates/conditionals/