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.

What about the if/show binding? `
` http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.1.1/doc/article/cheat-sheet/6 — nemesv, Feb 06 '16 at 17:23

score 35 · Accepted Answer · answered Feb 08 '16 at 13:35

35

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.

answered Feb 08 '16 at 13:35

Pratik Gajjar

597
5
14

1

where is the `if` binding in the docs? can't find it anywhere! argh – wal Mar 09 '17 at 15:12
Its hidden in the cheat sheet: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/5 – Michiel Cornille Apr 03 '17 at 13:38
1

the check only seems to be applying at construction. If the conditional value changes, the binding seems not to notice. – Manuel Hernandez Mar 17 '18 at 14:53

score 6 · Answer 2 · answered Jun 13 '17 at 14:56

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.

score 1 · Answer 3 · answered Feb 06 '16 at 17:13

1

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.

answered Feb 06 '16 at 17:13

Callum Linington

14,213
12
75
154

3

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. `
` – Dwayne Charrington Jun 15 '17 at 04:32
It doesn't make sense to use a value converter when Aurelia has this functionality built in. – nym Aug 22 '17 at 18:07
Well, when you use from beta :) – Callum Linington Aug 22 '17 at 18:24

score 1 · Answer 4 · answered Jul 19 '18 at 08:15

1

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

answered Jul 19 '18 at 08:15

Amjad Rehman A

788
10
21

Conditionally display Element using Aurelia

4 Answers4