角绑定ng-if

Question

I am not able to binding properly, it should toggle on click. ng-reflect-ng-if becomes true and it remains true, again on click it should be false, I tried (clickoutside) also but no luck. Followed this question also from stackoverflow Binding a boolean value using *ngIf

<!--bindings={
      "ng-reflect-ng-if": "true"}-->

---

TS code

 showAdditionalGraceInfo: boolean = false;
showAdditionalGraceInfo: boolean = false;

       toggleAdditionalGraceInfo() {

        this.showAdditionalGraceInfo = !this.showAdditionalGraceInfo;
        if(this.showAdditionalGraceInfo === true){
          this.showAdditionalGraceInfoWrapper = true;
       } else{
         this.showAdditionalGraceInfoWrapper = false
       }
      }

HTML code

 <span (click)="toggleAdditionalGraceInfo()">
                        <span *ngIf="showAdditionalGraceInfoWrapper">
                            {{graceDaysAdditionalInfo}}
                        </span>
                    </span>

Answer 1

Try this

Code TS

toggleAdditionalGraceInfo() {
    if(!this.showAdditionalGraceInfo){
      this.showAdditionalGraceInfoWrapper = true;
   } else{
     this.showAdditionalGraceInfoWrapper = false
   }
}

Code HTML

<span (click)="toggleAdditionalGraceInfo()">
   <ng-container *ngIf="showAdditionalGraceInfoWrapper">
     <span>{{graceDaysAdditionalInfo}}</span>
   </ng-container>
</span>

Answer 2

You probably don't need two variables for what you are trying to do. This is how you can do it if you must use both those variables.

 <span id="test" (click)="showAdditionalGraceInfoWrapper = showAdditonalGraceInfo = !showAdditionalGraceInfoWrapper"> <span *ngIf="showAdditionalGraceInfoWrapper"> {{graceDaysAdditionalInfo}} </span> </span> 

  showAdditionalGraceInfoWrapper:boolean = true;
  showAdditonalGraceInfo:boolean = true;
  graceDaysAdditionalInfo: string = "test"

Example: https://stackblitz.com/edit/angular-vlfmur