динамически добавлять div в контейнер angular 6

Question

Я хочу добавить div по нажатию кнопки, и он должен иметь 1 добавленный по умолчанию, а для вновь добавленного div мне нужен класс active

 <div class="card-content">
    <div class="questions" *ngFor="let question of questions, let i = index" [ngClass]="{'active': i}">
      <app-question-card></app-question-card>
    </div>
  </div>
  <div class="footer" (click)="addNewQuestion()">
    <div class="running-txt">Add new question</div>
  </div>

questions: number[] = [1];
addNewQuestion() {
    this.questions.push(this.questions.length);
  }

добавление работает как и ожидалось, но класс не добавляется так, как должен, и он не удаляется из 1 добавленного по умолчанию элемента div, а также какая-либо идея?

Answer 1

Если вы хотите применить класс active только к последнему элементу, вы можете сделать это следующим образом:

<div class="questions" *ngFor="let question of questions; let last = last" [ngClass]="{'active': last}">
  <app-question-card></app-question-card>
</div>

Это создает переменную, которая может использоваться для идентификации последнего элемента в список.