web-dev-qa-db-fra.com

Masquer et afficher sur clic dans l'ionique 2

Je veux masquer et afficher le champ de saisie en cliquant sur un bouton .. Quelqu'un peut-il me dire comment faire.

Mon code suit:

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

Besoin de se cacher

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

Merci d'avance

angulartypescriptionic2
7
Vivek Kannan

Vous pouvez utiliser une variable dans votre code derrière et un *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;
    }
}

Voici un exemple de lecteur https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

J'espère que cela pourra aider

- Edit - Plunk mis à jour avec exemple animé

Il est possible de cliquer sur des boutons animés, mais ils sont légèrement différents. Vous devez utiliser l'animation intégrée d'angular qui est insérée dans le composant lui-même. Cela nécessite également des importations supplémentaires au sein du composant pour pouvoir l'utiliser.

Dans la configuration du composant, vous insérez une balise d'animation avec votre sélecteur, modèle, etc., et vous pouvez appliquer les modifications de style à celle basée sur la chaîne.

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

Ceci est ensuite appliqué à quelque chose dans les composants HTML avec une balise comme suit.

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

Voici à nouveau l'exemple de plunker https://plnkr.co/edit/Ot0b9iSc3vHWIDdwhhpw?p=preview

J'espère que ça aide encore plus

15
Oliver Cooke

utiliser ngIf pour afficher et masquer un contenu 

dans votre .html

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

dans votre fichier .ts

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