Displaying component dynamically by index inside ngFor

Question

I have a bunch of tasks and they have comments, when I click show comments on a particular list element I want to display only the component for that index.

<ul class="list-group" *ngFor="let item of todayTasks;let i = index">

     <li ..
       <button class="btn btn-info float-right"(click)="displayCommentsComponent(i)">Comments</button>
    </li>
    <app-today-tasks-comments id="{{'tasksComment' + i}}" *ngIf="showCommentComponent"</app-today-tasks-comments> 
</ul>

I don't know what to put in that *ngIf to display one specific element by index, right now it shows all of them.

Mathew Berg · Accepted Answer · 2022-01-18 17:56:53Z

1

Update your code to have the *ngIf dependent on the index: *ngIf="showCommentComponent[i]"

<app-today-tasks-comments id="{{'tasksComment' + i}}" *ngIf="showCommentComponent[i]"></app-today-tasks-comments>

And then in your class, toggle that index on a map:

showCommentComponent = {};

displayCommentsComponent(index){
  this.showCommentComponent[index] = !this.showCommentComponent[index];
}

answered Jan 18, 2022 at 17:56

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

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

3 Comments

Wttftyh Gytyf Over a year ago

'showCommentComponent: any[] = [];' I made this variable this type and it works but.. Care to explain a bit *ngIf="showCommentComponent[i]" is basically an element right? So I used the debugger and I can see an array of booleans, method inside that switches between true and false, why does that happen when I do statement inside displayComments method? I don't understand why the array is inferred as an array of booleans and just by negation statement with index can switch like this, this is so weird and cool

Mathew Berg Over a year ago

Yeah that will work too. The reason it does is because this: !this.showCommentComponent[index]; will turn something that is undefined into true.

Wttftyh Gytyf Over a year ago

I've been blessed by one of the vanilla javasript gods haha, this was a very nice lesson to learn thank you!

Collectives™ on Stack Overflow

Displaying component dynamically by index inside ngFor

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related