conditional-content.md

In a template, you can use if to conditionally render content. There are 2 styles of if: block and inline.

{{#if this.thingIsTrue}}
  Content for the block form of "if"
{{/if}}

<div class={{if this.thingIsTrue "value-if-true" "value-if-false"}}>
  This div used the inline "if" to calculate the class to use.
</div>

Additionally, you can use template helpers like concat within a conditional. For the example below, if @color has a truthy value, such as 'navy', the div classes will include badge-navy:

<div class="badge {{if @color (concat 'badge-' @color)}}">
  Badge Text
</div>

Block if

Motivation

Let's take a look at two components that display a person's username.

<h4 class="username">
  Tomster
  <span class="local-time">their local time is 4:56pm</span>
</h4>

<h4 class="username">
  Zoey
</h4>

The components look similar, don't they? The first component shows extra information about the user's local time.

Let's say we tried to create a single username component.

<h4 class="username">
  {{@name}}
  <span class="local-time">their local time is {{@localTime}}</span>
</h4>

If the <Username> tag doesn't specify a @localTime argument, we will see an extra, incomplete text, their local time is , on the screen.

What we need is a way to display the local time if @localTime exists. We can do this with an if.

<h4 class="username">
  {{@name}}
  {{#if @localTime}}
    <span class="local-time">their local time is {{@localTime}}</span>
  {{/if}}
</h4>

Zoey says...

Just like in JavaScript, 0, false, null, undefined, and the empty string are falsy in Ember templates. Unlike in JavaScript, the empty array is also considered falsy in Ember templates.

Usage

{{#if condition}}
  {{!-- some content --}}
{{/if}}

This is the syntax for an if statement in block form. If the condition is true, Ember will render the content that is inside the block.

Like many programming languages, Ember also allows you to write if else and if else if statements in a template.

{{#if condition}}
  {{!-- some content --}}
{{else}}
  {{!-- some other content --}}
{{/if}}

{{#if condition1}}
  ...
{{else if condition2}}
  ...
{{else if condition3}}
  ...
{{else}}
  ...
{{/if}}

The block form of the if statement is typically used to wrap HTML elements or another block. If you want to use if inside of an HTML element, keep reading to learn about how to use inline if instead.

Here's an example of a block if, wrapping some HTML elements:

  {{#if @disabled}}
    <button disabled class="btn">Sign In</button>
  {{else}}
    <button class="btn">Sign In</button>
  {{/if}}

## Inline `if`

### Motivation

Sometimes, you will want to conditionally set an argument or attribute.

For instance, consider two components that display a user's avatar.
One is for a recipient and the other for a sender.

```handlebars {data-filename="app/components/received-message/avatar.hbs"}
<aside>
  <div
    class="avatar is-active"
    title="Tomster's avatar"
  >
    T
  </div>
</aside>

<aside class="current-user">
  <div
    class="avatar"
    title="Zoey's avatar"
  >
    Z
  </div>
</aside>

Again, the two components look similar. The first component has an is-active class, while the second a current-user class. How should we unify the components into one?

The is-active class is responsible for showing the active icon. How that icon is rendered may change over time, so we won't use ...attributes to apply the is-active class. Instead, we'll pass the argument @isActive to dictate what to do (e.g. render the icon).

As for the current-user class, it may have been just one of a few classes that can be applied to the <aside> element. Let's use ...attributes to apply the current-user class.

We take these API designs into account and end up with a reusable component. The component uses an inline if to conditionally apply the is-active class.

<aside ...attributes>
  <div
    class="avatar {{if @isActive "is-active"}}"
    title={{@title}}
  >
    {{@initial}}
  </div>
</aside>

Afterwards, we can refactor the initial components.

<Avatar
  @isActive={{true}}
  @title="Tomster's avatar"
  @initial="T"
/>

<Avatar
  class="current-user"
  @title="Zoey's avatar"
  @initial="Z"
/>

Zoey says...

When passing a literal JavaScript value to a component, we have to wrap the value in double curlies (e.g. @isActive={{true}}). A value that isn't wrapped in curlies is assigned as string, which matches the behavior in HTML attributes. For example, writing @isActive=true will set @isActive to the string 'true'.

Usage

{{if condition value}}

This is the syntax for an if statement in inline form. If the condition is true, Ember will use value at the invocation site.

Ember also allows you to write an if else statement in inline form. It looks similar to a ternary operator.

{{if condition value1 value2}}

Similarly to block if, you need to pay attention where inline if is placed. Inline if can be used only inside attribute values of HTML elements. For example:

  <span class="spinner {{if @inProgress 'visible' 'invisible'}}">
  </span>


## Learn More

Please see the [API documentation of the `if` helper](https://api.emberjs.com/ember/release/classes/Ember.Templates.helpers/methods/if?anchor=if) for more patterns.