Handlebar if-else helper examples| Conditional expression in the handlebar

Handlebar if condition 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 or undefined or empty

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

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

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

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

It enables to render of a block of code on the condition that is passed.

Please note that we have #if block followed by rendered block with end block.

if-else helper in handlerbarJS

Handlebar support if and else conditional block to render HTML templates It uses if and else helper classes to achieve that

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

if the name is found, It executes a block inside it 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}}

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}}
  <div>There are no Roles.</div>

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

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}}
{{! multiple conditions and not satisfied}}

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}}
{{! multiple conditions not satisfied}}

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

{{#compareStrings username "john"}}
<div> Equal</div>
<div> Not Equal</div>
{{/compareStrings }}

Generated Html output

<div> Equal</div>


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
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.