View acting weird when adding a function to ngIf.

[paper gale]

I have a view that only displays if currentScreen <= screenEnum.Small. So I enclosed them into a function isSmallScreen() and it returns a boolean value. When I use this function in ngIf, the view of the component gets messed up. I didn't play with any CSS properties. I have attached the views.
Here is the HTML code

<div
        *ngIf="isSmallScreen"
        class="d-flex justify-content-end align-items-center me-auto ms-auto mobile-top-filter"
      >
        <form-button
          class="d-none"
          [label]="'Sort'"
          [name]="'sort'"
          [btnName]="'raised'"
          [color]="'secondary'"
          [icon]="'sort'"
          [disabled]="true"
          (btnClick)="filterHandler()"
        ></form-button>
      </div>

Here is the ts file -

isSmallScreen() {
    if (this.currentScreen <= this.screenEnum.Small) {
      return true;
    } else {
      return false;
    }
  }

[gleaming lodge]

Just to be sure, do u have ngIf="isSmallScreen" or ngIf="isSmallScreen()" ?

[paper gale]

Its ngIf="isSmallScreen"

[gleaming lodge]

That's not calling the method.

You should ensure you call it by adding ().

Not sure it helps anything in terms of the view being messed up tho.

[paper gale]

Okay let me try that out