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?

If I understand correctly : you have a list of order and when you click on an order it should request some kind of details and display them ? And the problem is when you click on one every orders are loaded ? If the problem is only to cache component you should use css visibility (use ngIf with rowComponentsLoaded for example and set visibility with ngClass on rowComponentSVisibility) — Ostn, Jul 07 '20 at 12:53
Yes, but atfirst time component should be loaded (request send), second time I need just/ show/hide it — , Jul 07 '20 at 12:57

score 0 · Accepted Answer · answered Jul 07 '20 at 13:15

0

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

answered Jul 07 '20 at 13:15

Ostn

803
1
9
27

Maybe to use ViewChild? – Jul 07 '20 at 13:18
Could you explain ` hideVisibilityBut(index);`? – Jul 07 '20 at 13:20
ViewChildren as you have a list, yes it should work as well. You also may deal with visibility inside the loaded component itself (maybe the simplest way actually) – Ostn Jul 07 '20 at 13:21
How to combine `this.rowComponentsVisibility` and `this.rowComponentsLoad`? – Jul 07 '20 at 13:21
Could you explain how to use `ViewChildren ` and changes inner state of dropdown? – Jul 07 '20 at 13:22
hideVisibilityBut is to hide every element but the one clicked – Ostn Jul 07 '20 at 13:22
app-dropdown-reglaments is not a component you wrote ? – Ostn Jul 07 '20 at 13:24
It is compoenent, if to use `ViewChildren` should I wrap component HTML in ng-container? – Jul 07 '20 at 13:25
https://stackoverflow.com/questions/53016596/angular-5-access-divs-list-using-viewchildren – Ostn Jul 07 '20 at 13:25
Problem is that using ViewChildren it initializes ngInit of components, where I make server request – Jul 07 '20 at 13:27
1

right, if you have access to the app-dropdown-reglaments then you can choose to display it or not using css https://stackoverflow.com/questions/50458920/angular-6-show-hide-component-programmatically-using-contentchildren-and-ho – Ostn Jul 07 '20 at 13:30

How to activate component in loop angular?

1 Answers1