title: Angular binding ng-if
body: <p>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
  <a href="https://stackoverflow.com/questions/48006599/binding-a-boolean-value-using-ngif">Binding a boolean value using *ngIf</a> </p>
  
  <pre><code>&lt;!--bindings={
        "ng-reflect-ng-if": "true"}--&gt;
  </code></pre>
  
  <hr>
  
  <p>TS code</p>
  
  <pre><code> showAdditionalGraceInfo: boolean = false;
  showAdditionalGraceInfo: boolean = false;
  
         toggleAdditionalGraceInfo() {
  
          this.showAdditionalGraceInfo = !this.showAdditionalGraceInfo;
          if(this.showAdditionalGraceInfo === true){
            this.showAdditionalGraceInfoWrapper = true;
         } else{
           this.showAdditionalGraceInfoWrapper = false
         }
        }
  </code></pre>
  
  <p>HTML code</p>
  
  <pre><code> &lt;span (click)="toggleAdditionalGraceInfo()"&gt;
                          &lt;span *ngIf="showAdditionalGraceInfoWrapper"&gt;
                              {{graceDaysAdditionalInfo}}
                          &lt;/span&gt;
                      &lt;/span&gt;
  </code></pre>