CODEWITHSUNDEEP
htmlangularionic2
Krishna_32
Krishna_32

Reputation: 175

How to display some static text by clicking button text should disappear using ionic 2?

I am new to ionic 2,In front of ion-icon i want some text in the same row which means by in default there is div tag,in div tag there is text, by clicking the remove icon the text should disappear. Below is my code:

 <ion-list>
    <ion-item no-lines (click)="toggleLanguages()" class="content">
      <ion-icon name="create" item-left class="sai"></ion-icon>     
       Language 
       <div class="english">English 
       <ion-icon name="add" item-right *ngIf="languageShow" ></ion-icon>
       <ion-icon name="remove" item-right *ngIf="languageHide"></ion-icon>
     </div>
   </ion-item>
 </ion-list

Upvotes: 0

Views: 858

Answers (1)

Ivar Reukers
Ivar Reukers

Reputation: 7719

 <ion-list>
    <ion-item no-lines (click)="toggleLanguages()" class="content">
      <ion-icon name="create" item-left class="sai"></ion-icon>     
       Language 
       <div class="english">
         <span *ngIf="languageHide">English</span> 
         <ion-icon name="add" item-right *ngIf="languageShow" ></ion-icon>
         <ion-icon name="remove" item-right *ngIf="languageHide"></ion-icon>
     </div>
   </ion-item>
 </ion-list>

IF your TS looks like this (for example)

public languageShow: boolean = false;
public languageHide: boolean = true;

toggleLanguages() {
    this.languageShow = !this.languageShow;
    this.languageHide = !this.languageHide;
}

When 'remove' is pressed, languageHide turns false, thus, returning in the <span> where "English" is printed not being shown.

Then if the 'add' is pressed, you will see your "English" again (or any other language name you configured)

Upvotes: 1

Related Questions