Conditionally display Element using Aurelia

Question

So I have my auth class injected into my main.js:

import {Auth} from 'auth';
import {inject} from 'aurelia-framework';

@inject(Auth)
export class App {
    constructor(auth) {
        this.auth = auth;
    }

    get isLoggedIn() { return this.auth.isLoggedIn; }
}

so in my app.html

<form>
    <!-- form login elements -->
</form>

how do I make this element conditionally display based on my app getter function.

Kalina

What about the if/show binding? <form if.bind="isLoggedIn"></form> aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.1.1/doc/… – Damaraland

i couldn't find that, will have a look, cheers – Kalina

Answer 1

You can use if.bind to conditionally bind your DOM elements.

 <form>
      <div if.bind="auth.isLoggedIn">
        <!--this DOM element will be bind only if auth.isLoggedIn is true-->
      </div>
 </form>

Optionally, you can also use show.bind but that will only hide your DOM elements. Where as if.bind will not render it on your page.

Fonteyn

where is the if binding in the docs? can't find it anywhere! argh – Consolata

Its hidden in the cheat sheet: aurelia.io/hub.html#/doc/article/aurelia/framework/latest/… – Woosley

the check only seems to be applying at construction. If the conditional value changes, the binding seems not to notice. – Austriahungary

Answer 2

If you need to remove element completely from markup when condition is not met, you can use if.bind (as @Pratik Gajjar answered):

<template>
  <div if.bind="auth.isLoggedIn">
    <!--this DOM element will be bind only if auth.isLoggedIn is true-->
  </div>
</template>

If you need to conditionally set display: none on element, you can use show.bind:

<template>
  <div show.bind="auth.isLoggedIn">
    <!--this DOM element will be shown only if auth.isLoggedIn is true-->
  </div>
</template>

For details have a look at http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/6.

Bantustan

Answer 3

So I created a value converter:

export class CssdisplayValueConverter {
    toView(value) {
        return value ? 'none' : 'display';
    }
}

Then in my app.html:

<require from='css-display'></require>

<form css="display: ${isLoggedIn() | cssdisplay}"></form>

Boom, done.

Kalina

Worth pointing out to anyone else who encounters this question and this answer specifically: you can just use show.bind instead of the above value converter. It effectively does the same thing and comes out-of-the-box in Aurelia. <form show.bind="!isLoggedIn"></form> – Bromate

It doesn't make sense to use a value converter when Aurelia has this functionality built in. – Dodecagon

Well, when you use from beta :) – Kalina

Answer 4

You can use if.bind and show.bind for binding an element by checking a condition

Assentation