Hide and show on click in the ionic 2

Question

I Want to hide and show the input field by clicking a button. can anyone please tell me how to do.

My code follows:

<button ion-button full round >Click </button>

Need to Hide

<ion-input type="text" value=""></ion-input>

Thanks in advance

Answer 1

You could use a variable in your code behind and an *ngIf

your.component.html

<button ion-button full round (click)="onButtonClick()">Click</button>

<ion-input *ngIf="buttonClicked" type="text" value=""></ion-input>

your.component.ts

export class YourComponent {

    public buttonClicked: boolean = false; //Whatever you want to initialise it as

    public onButtonClick() {

        this.buttonClicked = !this.buttonClicked;
    }
}

Here's a plunker example https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

Hope that helps

-- Edit - Updated Plunk with animated example

Animated button clicks are can be done but they are slightly different, you have to use angular's built-in animation which is put within the component itself. It also requires additional imports within the component to use it.

Within the Component set up, you put an animation tag along with you selector, template etc and you can apply the style changes to that based on the string.

   animations: [
        trigger("showHello", [
            state("true", style({
                "opacity": 1
            })),
            state("false", style({
                "opacity": 0
            })),
            transition("1 => 0", animate("350ms ease-in")),
            transition("0 => 1", animate("350ms ease-out"))
        ])
    ]

This is then applied to something within the components HTML with a tag like follows.

<div [@showHello]="buttonClicked">
    animated hello
</div>

Here's the plunker example again https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

Hope that helps some more

Answer 2

use ngIf to show and hide a content

in your .html

<button ion-button full round (click)="ngIfCtrl()" >Click </button>
<ion-input type="text" value="" *ngIf="hide"></ion-input>

in your .ts file

 hide:boolean = true;
ngIfCtrl(){
  hide = !this.hide;
}