How to hide element in angular if one of the two condition is true

How to hide element in angular if one of the condition is true.

I tried with *ngIf=”productID == category.Lane || productID == category.Val”. It doesn’t work.

 <label>ProductID</label>
      <ng-select
        appearance="outline"
        
        formControlName="productId"
        [clearable]="false"
        [searchable]="false"
        [(ngModel)]="productID"
        placeholder="Select an option"
      >
        <ng-option *ngFor="let product of products | orderBy: 'name'" value="{{ product.id }}">{{ product.name }}</ng-option>
      </ng-select>
      
      <div class="row" *ngIf="productID == category.Lane || productID == category.Val">
      <div class="col">
      <label>Promotion</label>
     </div>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

With this condition:

*ngIf="productID == category.Lane || productID == category.Val"

You are saying, if first or second condition is truthy then show the element. If you want to hide it, in that case you should use the opposite condition:

*ngIf="!(productID == category.Lane || productID == category.Val)"

Method 2

Otherwise, you can use the hidden attribute instead of using *ngIf the condition

<div class="row" [hidden]="productID == category.Lane || productID == category.Val">

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0