Logic in HTML template

Hi all, I’m looking for some best practice advice on how to handle some basic logic for HTML rendering. To give a simple example, if I wanted to show a welcome message when a variable returns true:

{% if showWelcome == true %}
<h2>Welcome!</h2>
{% endif %}

Apologies for the Twig code example, I just have no idea of the syntax to do logic in an Ionic HTML templates. Reading the docs, it looks like I could pass an entirely new templateUrl but that seems a little overkill if the differences are minor.

Is there a template engine for logic like this in the HTML template? Would it be best to pass an entirely different templateUrl? Or is there something I’m missing?

Thanks!

Ah ok… so in the AngularJS 2 docs it say’s I can do this, which has a little flash of content before being hidden:

<h2 [hidden]="!showWelcome">Welcome!</h2>

or if you prefer

<h2 [hidden]="hideWelcome">Welcome!</h2>

Is this the best way to do it? Looks like it still gets rendered into the template - just hidden.

Try NgIf

import {NgIf} from ‘angular2/common’

<h2 *ngIf="hideWelcome">Welcome!</h2>

Docs: https://angular.io/docs/ts/latest/api/common/NgIf-directive.html

2 Likes

Beat me to it. Also for reference, https://angular.io/docs/ts/latest/guide/template-syntax.html

1 Like

Thanks both! knew it must be there somewhere, just didn’t know what to look for :slightly_smiling: