Search code examples
error-handlingnullngrxconditional-operatorngrx-store

How to handle condition in ngrx/store with operation < or >

<div class=" d-flex m-0 p-0 mt-2"
[ngClass]="{'justify-content-end': (howMoreSameBook$ | async) < 2,
  'justify-content-between' : (howMoreSameBook$ | async) > 1}">

<p *ngIf="(howMoreSameBook$ | async) > 1" 
class="d-flex align-items-center m-0 p-0" 
[ngStyle]="{'font-weight': 'bold'}">

Var howMoreSameBook$ returns number and I want to handles this three conditions. I got errors Object is possibly 'null'.ngtsc(2531). I know about length method, but in this case i need operations on type: number.

Solution

  • The async pipe is typed that it can also return a null value. That's something that you need to take into account while using it.

    For example:

    (howMoreSameBook$ | async) !== null && (howMoreSameBook$ | async) > 1

    Or you can workaround this issue with using !

    (howMoreSameBook$ | async)! > 1