ionicのクリックで非表示と表示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

希望だ

アニメーションボタンのクリックを行うことができますされているが、それらは、わずかに異なっている、あなたのアニメーションの例でPlunkを更新しましたコンポーネント自体の中に配置されたangleのビルトインアニメーションを使用する必要があります。コンポーネントを使用するには、コンポーネント内に追加のインポートが必要です。

コンポーネントの設定では、セレクタ、テンプレートなどとともにアニメーションタグを配置し、その文字列に基づいてスタイルの変更を適用することができます。

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

あなたの.htmlでコンテンツ

を表示し、非表示に

使用ngIf

あなた.TSで

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