Why *NgIf not working angular 9 with boolean value

Question

i'm trying to display element with ngif on boolean like this :

<li *ngIf="!include == true">
    <span class="badge badge-pill badge-danger">
        <i [ngClass]="hearthClass"></i>
    </span>
</li>

my include var il initialized to false and switch state like this :

this.localStorageService.getCurrentUser().then((res) => {
      this.userProfile = res;
       if(this.song.likes.includes(this.userProfile._id)){
         this.include = true
       }
      this.classHeart();
    });

thank you everybody ! 👍

Answer 1

! operator works first, then ==, so when you set include to true, ngIf result is false.

Just write

<li *ngIf="include">
    <span class="badge badge-pill badge-danger">
        <i [ngClass]="hearthClass"></i>
    </span>
</li>