The given below code ng-if is not working as expected
if displayGroup
value is D
then it will print the first and Second block, did I made any mistake
<div *ngIf="(bookTravelInfo.displayGroup | uppercase) === 'A' || 'B' || 'C' "> <h2>Perfect!</h2> </div> <div *ngIf="(bookTravelInfo.displayGroup | uppercase) === 'D' "> <h2>Does not Perfect</h2> </div>
Advertisement
Answer
If you want to check bookTravelInfo.displayGroup
is either ‘A’ or ‘B’ or ‘C’,
Use
*ngIf="['A', 'B', 'C'].includes(bookTravelInfo.displayGroup | uppercase)"
||
Logical OR operator from your *ngIf
will never return false
.
As the boolean result returned true
when the value is neither null
, nor undefined
nor false
as according to ToBoolean.
Hence the first <div>
element still be displayed with:
*ngIf="(bookTravelInfo.displayGroup | uppercase) === 'A' || 'B' || 'C'"