CODEWITHSUNDEEP
androidmobileionic3angular6hybrid-mobile-app
Thedroider
Thedroider

Reputation: 239

How can I hide the 2 ionic button when a single button is clicked?

I am using 2 ionic fab buttons one for approving the user's details & other for rejecting it. I'm using both the buttons as shows below:

  <ion-fab right   #fab>
    <button *ngIf="hideButton" ion-fab mini class="fab-mini-style" (click)="approve()" >
          <ion-icon style="color:#006400" name="checkmark"></ion-icon>
    </button>
 </ion-fab>
 <ion-col col-2 *ngIf = "false">
      <ion-fab right   #fab>
          <button *ngIf="hideButton" ion-fab mini class="fab-mini-style" (click)="reject()" >
                <ion-icon style="color:red" name="close"></ion-icon>
           </button>
       </ion-fab>
 </ion-col>

In my TS file for both the method:

approve(){
    this.message.alert("Congrats! Your account has been approved")
}
reject(){
    this.message.alert("Sorry your account has not been approved")
}

How can I hide both the buttons even if I click any one of the buttons? i.e, Even if I click approve button also,both the buttons should be hidden, or even if I click cancel button also,both the buttons should be hidden. How can I achieve it?

Upvotes: 0

Views: 2662

Answers (1)

Arj 1411
Arj 1411

Reputation: 1401

Try like this

<ion-fab right   #fab>

    <button *ngIf="hideButton" ion-fab mini class="fab-mini-style" (click)="Approve()" >
          <ion-icon style="color:#006400" name="checkmark"></ion-icon>
    </button>
 </ion-fab>
 <ion-col col-2 *ngIf = "false">
      <ion-fab right   #fab>

          <button *ngIf="hideButton" ion-fab mini class="fab-mini-style" (click)="Reject()" >
                <ion-icon style="color:red" name="close"></ion-icon>
           </button>
       </ion-fab>
 </ion-col>

in your .ts file

hideButton:boolean = true;

approve(){
  if(this.hideButton){
      this.hideButton = false;
  }
    this.message.alert("Congrats! Your account has been approved")
  }
cancel(){
   if(this.hideButton){
       this.hideButton = false;
   }
   this.message.alert("Sorry your account has not been approved")
 }

NB: Please add your business logic to make the button visible.

Upvotes: 2

Related Questions