Handlebar if-else Conditional helper(Examples)

This tutorial covers a handlebar if help classes with examples, it also includes how to test conditional block execution in handlebar mustache templates.

HandlebarJS provides {{#if}} and {{#unless}} helper provides a helper to conditional test the expression against javascript objects.

if the condition in the handlebar helps to solve the below things

Conditional to check if an object is null, undefined, or empty

if and unless are used to check the properties of an object, not an expressions

{
  "id": 1,
  "name": "john",
  "salary": 5000
}

Here is an HTML template to check if the name is null, undefined, or empty

<div class="printname">
  {{#if name}}
  <h1>{{name}} {{salary}}</h1>
  {{/if}}
</div>

It enables to rendering of a block of code based on the passed condition.

Please note that we have #if({{if}}) block followed by rendered block with end block({{/if}}).

if-else helper in handlerbarJS

The handlebar supports the if and else conditional block to render HTML templates.

It uses if and else helper classes to achieve that.

It evaluates an expression, executes if block for truthy values, else block executed for false value.

Sometimes, We want to execute a block on re

<div class="printname">
  {{#if name}}
  <h1>{{name}} {{salary}}</h1>
  {{else}}
  <h1>No Employee found</h1>
  {{/if}}
</div>

if the name is found, It executes the if block, otherwise it executes the else block.

else if helper in handlerbarJS

Nested if inside else can be used in handlebar JS from version 3. x.

Here is a syntax

{{#if isAdmin}}
  ...
{{else}} {{#if isHr}}
  ...
{{else}}
  ...
{{/if}}
{{/if}}

How to use if in for loop with handlebarjs

Sometimes, while iteration an array of json objects, We want to check the conditional if expression.

Here is an example to check if inside for each iteration.

[
  {
    "id": 1,
    "name": "John",
    "salary": 5000
  },
  {
    "id": 2,
    "name": "Franc",
    "salary": 4000
  },
  {
    "id": 3,
    "name": "Ram",
    "salary": 9000
  }
]

if helper checks each object name value found, if not else block is executed.

{{#each this}}
  {{#if this.name  }}
<div>Name Found </div> {{/if}}
{{else}}
  <div>There are no Roles.</div>
{{/each}}

How to add multiple conditions if helper in handlebarJS?

In javascript, We can have multiple conditions if using && operator

if (condition1 && condition2) {
  //if the code
} else {
  // else code
}

There is no and, or operator in handlebars, But we can achieve the same with either nested if helper or custom helper we can replace the above with nested if helper classes

{{#if condition1}}
  // condition1 code
  {{else if condition2}}
    //condition2 code
  {{/if}}
{{/if}}

Let’s see customer helper achieve and, or operators.

here is a code for handlbarJS and operator example

Handlebars.registerHelper("isAnd", function (cond1, cond2, options) {
  return cond1 && cond2 ? options.fn(this) : options.inverse(this);
});

Below is the usage of an operator in the handlebar template

{{#isAnd condition1  condition2}}
{{! multiple conditions and satisfied}}
{{else}}
{{! multiple conditions and not satisfied}}
{{/isAnd}}

Let’s write a code for handlbarJS OR operator example

Handlebars.registerHelper("isOr", function (cond1, cond2, options) {
  return cond1 || cond2 ? options.fn(this) : options.inverse(this);
});

Below is the usage of or operator in the handlebar template

{{#isOr condition1  condition2}}
{{! multiple conditions not satisfied}}
{{else}}
{{! multiple conditions not satisfied}}

{{/isOr}}

How to compare whether two strings are equal or not

Sometimes, We want to check if a given two strings are equal are not.

We can use the === operator for comparing strings or any primitive types.

There is no Inbuilt comparison operator in handlebars, However, We can write a custom helper javascript to achieve this.

For example, let’s have a json object

{
    numbers: ["one", "two", "three"],
    username: "john"
    isAuthenticated: true
}

Write a helper function to check a strings comparison -compareStrings.

This helper checks for two things

Handlebars if not an equal condition with string
Compare two strings are equal or not

Handlebars.registerHelper("compareStrings", function (p, q, options) {
  return p == q ? options.fn(this) : options.inverse(this);
});

Let’s use this helper in the handlebar template.

<div>
{{#compareStrings username "john"}}

<div> Equal</div>
{{else}}
<div> Not Equal</div>
{{/compareStrings }}
</div>

Generated Html output

<div>
  <div>Equal</div>
</div>

Conclusion

In this tutorial, You learned how to do conditional if-else logic helper in Javascript template examples with handlebarJS.

if-else helper
nested if-else
multiple conditions in if the helper
if string equals comparison
handlebarjs and operator
handlebarjs or operator

Handlebar if-else Conditional helper(Examples)

#if-else helper in handlerbarJS

#else if helper in handlerbarJS

#How to use if in for loop with handlebarjs

#How to add multiple conditions if helper in handlebarJS?

#How to compare whether two strings are equal or not