EmberJS - Template Condition If

The #if statement uses a boolean expression wherein, if the Boolean expression is true, then the block of code inside the if statement will be executed; if the Boolean expression is false, then the else block will be executed.

Syntax

{{#if property-name}}
   //statement
{{else}}
   //statement
{{/if}}

Example

The example given below shows the use of the if conditional helper in Ember.js. Create a template called application.hbs under app/templates/ with the following code −

{{#if check}}
   //true block of statement
   <h3> boolean value is {{check}}</h3>
   {{else}}
   //false block of statement
   <h3>boolean value is {{check}}</h3>
{{/if}}

Next, create the controller called application.js file which will be defined under app/controller/ with the following code −

import Ember from 'ember';

export default Ember.Controller.extend ({
   bool: true,
   check: function () {
      //returning the boolean value to the called function
      return this.bool;
   }.property('content.check'),
});

Output

Run the ember server and you will receive the following output −