Verstecken und Zeigen auf Klick in die ionische 2

Question

Ich möchte das Eingabefeld ausblenden und anzeigen, indem Sie auf eine Schaltfläche klicken. kann mir bitte jemand sagen, wie es geht.

Mein Code folgt:

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

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

Vielen Dank im Voraus zu verbergen Need

Answer 1

Sie eine Variable im Code hinter verwenden könnte und ein *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

Hier ist ein Plunker Beispiel https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

Hoffnung, die

hilft - bearbeiten - Aktualisiert Plunk mit animierten Beispiel kann

Animierte Tastenklicks sind getan werden, aber sie sind etwas anders, Sie muss die eingebaute Animation von angular verwenden, die in die Komponente selbst eingefügt wird. Es erfordert auch zusätzliche Importe innerhalb der Komponente, um es zu verwenden.

Innerhalb der Komponente einrichten, Sie fügen ein Animations-Tag zusammen mit Ihnen Selektor, Vorlage usw. und Sie können die Änderungen des Stils basierend auf der Zeichenfolge anwenden.

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

Dies wird dann auf etwas innerhalb der Komponenten HTML mit einem Tag wie folgt angewendet.

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

Hier ist das Plunker Beispiel wieder https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

Hoffnung, dass einige mehr

Answer 2

Verwendung ngIf zu zeigen und einen Gehalt

in Ihrer .html zu verstecken

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

in Ihrem .ts Datei

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