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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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