Another condition in *ngif

Question

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>

Is [this](https://stackoverflow.com/questions/43006550/how-to-use-ngif-else) something, that could help? — NationBoneless, Dec 29 '20 at 20:36
I need to add another condition like this`commonService.indexKey$.getValue().includes(item.id)?` in `*ngIf` to check id — Mali, Dec 29 '20 at 20:40
If I just use this code `item.quantity - commonService.liststock$.getValue() > 0` wihtout add this `commonService.indexKey$.getValue().includes(item.id)?` all list will change — Mali, Dec 29 '20 at 21:01
In an *ngIf directive you can put only an expression that can be true or false. I don't know if your item.quantity is boolean, if not it won't work. However, `*ngIf="commonService.indexKey$.getValue().includes(item.id) ? (item.quantity - commonService.liststock$.getValue() > 0) : item.quantity; else notFound"` — Antonio Esposito, Dec 29 '20 at 21:48
@AntonioEsposito `item.quantity` is not boolean. it is number — Mali, Dec 30 '20 at 00:43

Luay AL-Assadi · Accepted Answer · 2020-12-30T10:12:33.103

4

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>

edited Dec 30 '20 at 10:12

answered Dec 29 '20 at 22:02

Luay AL-Assadi

426
7
16

I got error `item.id`. it come from `*ngFor="let item of commonService.indexList$.getValue(); let i = index"` – Mali Dec 30 '20 at 00:56
1

I wrote the code as example, you need to edit the function to pass item, I'll edit the answer – Luay AL-Assadi Dec 30 '20 at 10:10
2

Luay, NOP, *ngIf can be use with number, string or object not only with booleans, e.g. is variable1=0, variable2=4,variable3="something", variable4=null, variable5='', variable6={}, *ngIf="variable1", *ngIf="variable4" and *ngIf="variable5" is false, *ngIf="variable3", *ngIf="variable3 and *ngIf="variable6" is true – Eliseo Dec 30 '20 at 11:23
1

Yes that true, you can pass what you mentioned but all of them one way or another expression returns true or false (object defined or not / empty or equal to zero), and I think (based on the question) he is beginner so mentioning all that cases doesn't make sense. – Luay AL-Assadi Dec 30 '20 at 11:34
Yes true.., I'm new in programming..Thank you so much all for your answer and comment – Mali Dec 30 '20 at 13:14

score 2 · Answer 2 · answered Dec 30 '20 at 15:25

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">

Another condition in *ngif

2 Answers2