CODEWITHSUNDEEP
angulartypescript
Mali
Mali

Reputation: 33

Another condition in *ngif

it is possible to make another condition in *ngIf. I try add condition like this in *ngIf commonService.indexKey$.getValue().includes(item.id)?item.quantity - commonService.liststock$.getValue() > 0:item.quantity; else notFound but i got error this error message Error: Uncaught (in promise): Error: Template parse errors:Parser Error: Missing expected.

HTML

<div *ngFor="let item of commonService.indexList$.getValue(); let i = index" class="Box">
 <span *ngIf="commonService.indexKey$.getValue().includes(item.id)?item.quantity - commonService.liststock$.getValue() > 0:item.quantity; else notFound"> 

</span>
<ng-template #notFound>
</ng-template>

Upvotes: 0

Views: 685

Answers (2)

Yasha Gasparyan
Yasha Gasparyan

Reputation: 400

Although the answer above is correct, it is worth to mention that nothing's wrong with containing your logic in *ngIf - you just need to keep the spaces to avoid parse errors

<span *ngIf="commonService.indexKey$.getValue().includes(item.id) ? item.quantity - commonService.liststock$.getValue() > 0 : item.quantity; else notFound">

Upvotes: 2

Luay AL-Assadi
Luay AL-Assadi

Reputation: 446

No you can't do something like that, *ngIf accepts logical operators only Or you can use function and it's result should be true or false only!

If you have a complex condition you can define a function in your component.ts and use it in *ngIf

for example:

check(item){
   if (this.commonService.indexKey$.getValue().includes(item.id)){
      if(item.quantity - this.commonService.liststock$.getValue() > 0)
         return true;
      else 
         return false;
   }
   else
      return false;
 }

and in your template

<span *ngIf="check(item)"> 

</span>

Upvotes: 4

Related Questions