gl-if

With this directive you can conditionally show/hide an element based on the value of the variable passed.

It is important to know that it doesn't remove and add the whole element back to the DOM, it only applies and removes the display: none attribute.

<div gl-if="isLogged">
  <p>Welcome back, <b gl-bind="username"></b></p>
</div>

False values

It is recommended to use only booleans when dealing with gl-if to avoid any type of confusion. Internally, GreenLight doesn't verify for true or false values only but it is best practice to provide to the directive only boolean values.

<div gl-if="isOnline"><div></div></div>

The code above is the same as running the following JavaScript

if(!isOnline)

So, you can pass a variable that is null but it will also take it as a false value. So, based on what you want to achieve it is good to keep in mind that it doesn't only check if it's true or false.