Angular directive not working with ng-container

Issue

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>

Solution

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

Answered By - Yong Shun