CODEWITHSUNDEEP
angular
LearnToday
LearnToday

Reputation: 2902

How to write css classes with *ngFor in template

I am trying to write the following in angular4 *ngFor I want something like : enter image description here

      public stars: any[] = new Array(5);

        <ul class="rating inline-ul">
          <li *ngFor="let star of stars; let i = index">
            <i class="fa" *ngIf="starValue >= i + 0.5" 
            [ngClass]="{'fa-star-half-o amber-text': starValue >= i + 0.5 
            && starValue < i + 1, 'fa-star amber-text': starValue >= i + 1}">
           </i>
          </li>
        </ul>

Unfortunately the above code gives me this :

enter image description here

How can I achieve this, *ngFor?

Upvotes: 1

Views: 53

Answers (3)

abbas-ak
abbas-ak

Reputation: 642

Following will be right fit:

<ul class="rating inline-ul">
  <li *ngFor="let star of stars; let i = index">
    <i   
    [class.fas]="i+0.5 < starValue || i+0.5 == starValue" 
    [class.far]="i > starValue"  
    [class.fa-star]="i+0.5 < starValue || i > starValue"  
    [class.fa-star-half]="i+.5 == starValue" >
    </i>
    <span *ngIf="i+.5 < starValue">fas fa-star</span>
    <span *ngIf="i+.5 == starValue">fas fa-star-half</span>
    <span *ngIf="i > starValue">far fa-star</span>
  </li>
</ul>

Upvotes: 1

Shashank Vivek
Shashank Vivek

Reputation: 17514

You have everything right except else part of *ngIf.

<div class="rating inline-ul">
 <span *ngFor="let star of stars; let i = index">
  <i class="fa" *ngIf="starValue >= i + 0.5; else star" [ngClass]="{
    'fa-star-half-o amber-text': starValue >= i + 0.5 && starValue < i + 1, 
    'fa-star amber-text': starValue >= i + 1
  }">
  </i>
  <!-- else part -->
  <ng-template #star>
      <i class="far fa-star"></i>
  </ng-template>
 </span>
</div>

Upvotes: 2

abbas-ak
abbas-ak

Reputation: 642

Yo can find the implementation from following StackBlitz URL: https://stackblitz.com/edit/angular-kbmtmv

Upvotes: 0

Related Questions