How can I use multiple CSS class based on the conditions?

 <div *ngFor="let product of products" >
      <button [ngClass]="product.button1 === 'C' || product.button1 === '( )' || product.button1 === '%' || product.button1 === '&divide' ? 'btn-blue-text btn-lg btn-outline-secondary col p-1 m-1' : 'btn btn-lg btn-outline-secondary col p-1 m-1'" type="button" (click)="clickNumber('Rad')">{{product.button1}}</button>
      <button  type="button" (click)="clickNumber('Deg')">{{product.button2}}</button>
      <button  type="button" (click)="clickNumber('x!')">{{product.button3}}</button>
      <button [ngClass]="product.button4 === '=' ? 'btn-blue btn-lg btn-outline-secondary col p-1 m-1' : 'btn btn-lg btn-outline-secondary col p-1 m-1'" type="button" (click)="clickNumber('(')">{{product.button4}}</button>
 </div>

The above code is working only on product.button === 'C', but not working on other conditions.

CodePudding user response：

You can use ng-container . For example you have a div inside the ng-container and it your ts file declare a variable

products: any=[];

and you have a condition where the variable is incremented every time a user clicks on that div and you make use as follows

This is show when it meets the condition

<ng-container *ngIf="products.length !=0">
 <div> <div>
<ng-container>

or else show this div

<ng-container *ngIf="products.length ==0">
 <div> <div>
<ng-container>

CodePudding user response：

[ngClass]="{ 'class1': condition1, 'class2': condition2, 'class3': condition3, 'class4': condition4, ... }"