Dynamically add classes inside *ngFor directive in angular5?

Question

I have below few classes that has to applied to a div in *ngFor as shown below:

        <div class="row">
          <ng-container *ngFor="let item of tripTiles">
             <div class="col-lg-3 col-md-6">
                <div class="panel panel-primary">
                   ...
                </div>
             </div>
           <ng-container>
        </div>   

I have classes like panel panel-primary, panel panel-green, panel panel-red and panel panel-yellow how can i dynamically assign these classes.

Can i get any help or idea?..

Answer 1

Try to use [ngClass] in div with conditions or variables, like in this answer:

Dynamic classname inside ngClass in angular 2

Example:

<div [ngClass]="[type === 'primary' ? 'panel-primary' : '']">
    ...
</div>