Как я могу добавить активный класс в первый div, используя * ngFor в angular 7?

Question

У меня есть carousel-item деления, которые повторяются через *ngFor, теперь я хочу добавить active класс в первый div (carousel-item). Как я могу добавить класс в угловой 7?

component.html

 <div class="carousel-item" *ngFor="let testimonial of getTestimonial">
       <p>{{testimonial.description}}</p>
        <p class="font-weight-bold font-italic t-name">{{testimonial.name}} - {{testimonial.profession}}</p>
  </div>  

Answer 1

Вы также можете использовать ngClass примерно так:

<div  class="carousel-item" 
      [ngClass]="{'active': isFirst }" 
      *ngFor = "let testimonial  of getTestimonial; let isFirst = first;">
        {{testimonial.title}}  {{testimonial.description}}
</div>

Answer 2

 <div class="carousel-item" *ngFor="let testimonial of getTestimonial; let isFirst = first"  [class.active]="isFirst">

Answer 3

<div class="carousel-item" *ngFor="let testimonial of getTestimonial;let i=index" [ngClass]="{'active': i == 0}">
   <p>{{testimonial.description}}</p>
    <p class="font-weight-bold font-italic t-name">{{testimonial.name}} - {{testimonial.profession}}</p>

Попробуйте это.

Answer 4

Попробуйте:

<div class="carousel-item" [class.active]="i===0" *ngFor="let testimonial of getTestimonial; let i=index">
      // your stuff ..
  </div> 

Рабочий стекблиц пример.