Ember Octane is here! A lot has changed since Ember 3.14, including these Guides. Read more in the Ember Blog.

Edit Page

Conditional Content


You can conditionally include some content in the output of a template by using Ember's if syntax in templates.

Let's take a look at two similar components representing a user's username.

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

We can use arguments to make these two components dynamic, but the first username also has extra information about the local time of the user.

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'll end up with some extra unneeded text in the output.

What we need is a way to only include the local time text 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>

This is the syntax for conditionals in an Ember template. The #if means that the part after the {{#if ...}} is nested inside of the conditional. Just like HTML tags continue until closed (<div> continues until </div>), the content nested inside an #if continues until {{/if}}.

Inline if

Sometimes, you need to place conditional content inside an argument or attribute. You can do this with inline if. For instance, consider these two avatar components, for received messages and for sent messages respectively:

<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>

The first component needs to have an is-active class applied to the avatar to show the active icon. That icon could also change over time, so it probably doesn't make sense to try to use ...attributes to apply it. It's a part of the public API of the component, so an argument makes sense.

So, we want to add the is-active class if an argument, like say @isActive, is passed in and is truthy.

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

In Ember templates, the values 0, false, null, undefined, and the empty string are falsy, just like in JavaScript. In addition, the empty array is also considered falsy in Ember templates.

We can then use the argument to add the active state to the received message avatar, and omit it from the sent message avatar.

<Avatar
  @title="Tomster's avatar"
  @initial="T"
  @isActive={{true}}
/>
<Avatar
  @title="Zoey's avatar"
  @initial="Z"
  class="current-user"
/>
Zoey says...

When passing literal JavaScript values to a component, we have to wrap the values in double curlies (like {{true}}). Values that are not wrapped in curlies are assigned as strings, matching the behavior of HTML attributes.