Change return value in Angular NgIf

Question

I have a button in my angular 9 project as follows

 <button *ngIf="showRaiseButton()" [ngClass]="unlockRaiseButton()" (click)="showRaiseOptions()">RAISE
      <h3 class="text-on-btn-ch"> R</h3>
    </button>

This button is displayed according to the return value of the function inside ngif which is

  showRaiseButton(){
    return this.actionState === 'actBettedPot' || this.actionState === 'actNotBettedPot'
      || this.actionState === 'folded' || this.actionState === 'called'
      || this.actionState === 'checked' || this.actionState === 'bet'
      || this.actionState === 'raised';
  }

I need to hide this button when I click on the button.The click is as follows

  showRaiseOptions(){
    if (this.unlockRaiseBtn){
      this.showRaiseOption = true;
      this.showBetOption = false;
      this.displayRaiseBtn = false;
    }
  }

How can I do this task.Please help

score 0 · Answer 1 · answered Jul 03 '20 at 11:04

I would create a variable just for the button it will look like this

showBtn: boolean;

showRaiseButton(){
  if (this.actionState === 'actBettedPot' || this.actionState === 'actNotBettedPot'
      || this.actionState === 'folded' || this.actionState === 'called'
      || this.actionState === 'checked' || this.actionState === 'bet'
      || this.actionState === 'raised';) {
      this.showBtn = true
      }
    return 
  }

and on button click add another action like below:

showRaiseOptions(){
    if (this.unlockRaiseBtn){
      this.showRaiseOption = true;
      this.showBetOption = false;
      this.displayRaiseBtn = false;
      this.showBtn = false
    }
  }

<button ngIf="showBtn" (click)="showRaiseoptions()"></button>

However in case you must call your ShowRaiseButton() somewhere else in your code when an action happens maybe when this.actionState value changes or ngOnInit that depends on the rest of your code

The problem is that I can't find a place to call my ShowRaiseButton() in my code.It is not called inside the ngonit also. — Sahan Thilakarathna, Jul 03 '20 at 11:13

score 0 · Accepted Answer · answered Jul 03 '20 at 11:05

You should use ouside condition to show or hide a section in your view, ng-container does not put a html tag as div or ...

for example you can use it like this:

displayRaiseBtn: boolean = true;

<ng-container *ngIf="displayRaiseBtn">
     <button *ngIf="showRaiseButton()" [ngClass]="unlockRaiseButton()" (click)="showRaiseOptions()">
        RAISE
        <h3 class="text-on-btn-ch"> R</h3>
     </button>   
</ng-container>

also you can use [hidden]='!displayRaiseBtn' into button, but i recommend first option.

That worked for me.Never had an idea about the ng-container. Thanks for the help sir — Sahan Thilakarathna, Jul 03 '20 at 11:31

Change return value in Angular NgIf

2 Answers2