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.

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.

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.

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.

Answer 4

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