How to activate component in loop angular?

Question

I have a template:

    <div *ngFor="let order of orders" (click)="showReglamentList =! showReglamentList">
       <app-dropdown-reglaments *ngIf="showReglamentList" [depid]="order.depId"></app-dropdown-reglaments>
    </div>

When user clicks over row it toggles showReglamentList, so component app-dropdown-reglaments is activated.

But now it activates all components in each row (loop) with server request.

I can solve this like this:

    let rowComponentVisibility = {};
    orders.foreach((item, index) => rowComponentsVisibility[index] = false);

Then use:

*ngIf="rowComponentsVisibility[index]"

Problem is I try to cache it, and dont initialize the component again, just hide/show if it was initilized before.

How to solve it?

Answer 1

You want component to be loaded on click, ngIf is a good option. Below I use rowComponentsLoad array to keep a track of what component to load. To display / hide you can use ngClass and toggle a "hide" class. You keep track of what is displayed in a second array rowComponentsVisibility.

<div *ngFor="let order of orders; let i=index;" (click)="loadOrder(i)">
   
    <app-dropdown-reglaments *ngIf="rowComponentsLoad[index]" ngClass="{ 'hide': rowComponentsVisibility[i] }></app-dropdown-reglaments>

</div>

component

loadOrder(index) {
    this.rowComponentsLoad[index] = true;
    this.rowComponentsVisibility[index] = true;
    hideVisibilityBut(index);
}
hideVisibilityBut(index) {
    for(for i=0;i<this.rowComponentsVisibility.length;i++) {
        if(i!==index) {
            this.rowComponentsVisibility[index] = false;
        }
    }
}

css

.hide {
    display: none;
}