dynamically add div to container angular 6

Question

I want to add a div on click of button, and it should have 1 did added by default and on newly added div i need a class active on it

 <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);
  }

the add is working as expected but the class is not getting appended the way it should and it is not getiing removed from 1 default added div as well any idea?

If you always want class active appended, just add it as class="active". Your expression [ngClass]="{'active': i} means add class active if i is truthy (meaning the first item will not have it as i is 0 in that case). — DaggeJ
– DaggeJ, Commented Mar 27, 2020 at 12:13
i want to add active only on the last element added in the questions array by default the question array has one div so active should be on that div and when i click on addNewQuestion() then active should on the lastest added div — juhi
– juhi, Commented Mar 27, 2020 at 12:15

DaggeJ · Accepted Answer · 2020-03-27 12:21:22Z

2

If you want to apply the class active to only the last item, you can do it like this;

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

This creates a variable that can be used to identify the last item in the list.

edited Mar 27, 2020 at 12:21

answered Mar 27, 2020 at 12:19

DaggeJ

2,2091 gold badge14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DaggeJ Over a year ago

Glad to help :)

juhi Over a year ago

it will be really helpful if u can help me out on how to pass that active class to the <app-question-card></app-question-card> based on ngClass check as input decorator

DaggeJ Over a year ago

You can use the same expression for you custom component: <app-question-card [ngClass]="{'active': last}">. You could also create an @input for your component and set it like [isLast]="last". Good luck :)

juhi Over a year ago

active class can either be on the last element or recently clicked index... how to manage that?

Collectives™ on Stack Overflow

dynamically add div to container angular 6

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related