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

Answer 1

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.