Michael Michael - 4 days ago 6
HTML Question

How can I negate hidden directive in html template?

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

you can use *ngIf declaration. exmp:

    <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;
        }

}
Comments