How can I negate hidden directive in html template?

Question

In a Ionic2 component I use the [hidden] directive in the HTML template. The @Component definition is:

@Component({
  selector: 'login-button',
  template:
    `<button ion-button round (click)="openLogin()" [hidden]="loggedIn">
        Login
        <ion-icon name="arrow-up"></ion-icon>
      </button>

      <button ion-button icon-only menuToggle [hidden]="!loggedIn">
        <ion-icon name="menu"></ion-icon>
      </button>
    `
})

I declare a component variable:

export class LoginButton {

  loggedIn: boolean = false;

The [hidden]="loggedIn" is working. The [hidden]="!loggedIn" shows the button no matter of the value of loggedIn variable.

How do I write that?

Answer 1

You can use *ngIf declaration. Example :

    <div *ngIf = "loggedIn">
          <button ion-button round (click)="openLogin()">
            Login
            <ion-icon name="arrow-up"></ion-icon>
          </button>
    </div>
    <div *ngIf = "!loggedIn">
          <button ion-button icon-only menuToggle>
            <ion-icon name="menu"></ion-icon>
          </button>
    </div>

--------------> Edit

          <button ion-button round (click)="openLogin()" [hidden]="hideLogin1()">
            Login
            <ion-icon name="arrow-up"></ion-icon>
          </button>



          <button ion-button icon-only menuToggle [hidden]="hideLogin2()">
            <ion-icon name="menu"></ion-icon>
          </button>
-----------------------------
export class LoginButton {
        hideLogin1(){
            return true;
        }   

        hideLogin2(){
            return false;
        }
}