This condition will always return 'false' since the types '1' and '2' have no overlap

Issue

I am trying to show/hide div based on returned variable number, status variable always returns 1 or 2. but i get error in my html:

This condition will always return 'false' since the types '1' and '2' have no overlap.

what am i doing wrong?

.ts

status: number;

   this.service.GetEstimationId(params['id']).subscribe(response => {
     this.status = response.estimationStatus;
     console.log(typeof this.status); // returns number
    });

.html

  <div class="d-flex justify-content-end" *ngIf="status === 1">
    <button (click)="toggleEdit(null, true)" type="submit" class="btn-green mt-3 send">
      <i class="far fa-file-alt mr-2"></i> Send
    </button>

    <div class="d-flex justify-content-end" *ngIf="status === 2">
      <button (click)="toggleEdit(null, false)" type="submit" class="btn-green mt-3 send">
        <i class="far fa-file-alt mr-2"></i> Save
      </button>
    </div>

Solution

You are using === for checking the condition which is used for comparing two variables and also checks datatype.

You can change the type to number:

this.status = Number(response.estimationStatus)

or use == instead.

*ngIf="status == 1"

Also seems that you forgot to close the first div tag:

<div class="d-flex justify-content-end" *ngIf="status === 1">
  <button type="submit" class="btn-green mt-3 send">
    <i class="far fa-file-alt mr-2"></i> Send
  </button>
</div>
<div class="d-flex justify-content-end" *ngIf="status === 2">
    <button type="submit" class="btn-green mt-3 send">
      <i class="far fa-file-alt mr-2"></i> Save
    </button>
</div>

Answered By - Saghi Shiri