Скрыть и показать по щелчку в ионном 2

Question

Я хочу скрыть и показать поле ввода, нажав кнопку. Может кто-нибудь, пожалуйста, скажите мне, как это сделать.

Мой код следующим образом:

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

нужно скрыть

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

Заранее спасибо

Answer 1

Вы можете использовать переменную в коде позади и *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; 
    } 
} 

Вот пример plunker https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

Надежда, что помогает

- Edit - Изменено шлепнуть с анимированными например

Анимационные нажатий на кнопки мышью можно сделать, но они немного отличаются, должны использовать встроенную анимацию углов, которая помещается внутри самого компонента. Он также требует дополнительного импорта внутри компонента для его использования.

В настройках компонента вы помещаете тег анимации вместе с вами, селектором, шаблоном и т. Д., И вы можете применить изменения стиля к этому на основе строки.

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")) 
     ]) 
    ] 

Это затем применяется к чему-то внутри компонентов HTML с тегом, как показано ниже.

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

Вот пример plunker снова https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

Надежда, что помогает некоторым больше

Answer 2

использование ngIf, чтобы показать и скрыть содержание

в вашем .html

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

в ваших .ts файл

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