Using *ngFor for odd items

Question

In my Angular project, I can populate the 4 employeeList components using the following loop:

<div *ngFor="let record of records">
    <p-panel >
        <div comp-employeeList [listFilter]="record.Filter"></div>
    </p-panel>
</div>

However, when I try to add 2 other components (statistic) as the 2nd and 4th element, I cannot use this loop. Actually I want to populate my components as shown on the image below. 1st and 3rd components for employee, 2nd and 4th is statistics components. So, how can I populate these 4 elements using ngFor? I know there is nth element in css, but I have no idea if it is suitable. Also there is index feature in *ngFor, but cannot use it properly in these components. It is ok just populate 1st and 3rd elements using *ngFor. Any help would be appreciated.

<div *ngFor="let record of records">
    <p-panel >
        <div comp-employeeList [listFilter]="record.Filter"></div>
    </p-panel>
</div>

<div>
    <p-panel>
        <div comp-statistics></div>
    </p-panel>
</div>

Should I use ngSwitch in ngFor statement? image host

Update

I also tried this:

<div *ngFor="let record of records; let o=odd; let e=even;">

    <div *ngIf="o">
        1st component
    </div>

    <div *ngIf="o">
        2nd component
    </div>

    <div *ngIf="e">
        3rd component
    </div>

    <div *ngIf="e">
        4th component
    </div>

</div>

I need to use iteration filter in my dynamic elements. So, could you post an example as answer? Maybe it is suitable for my situation. thnaks. — , Aug 08 '19 at 17:21
Would this help? https://stackoverflow.com/a/47115340/5468463 — Vega, Aug 09 '19 at 12:18
@Vega Seems to be very useful, I will give a try. Thanks a lot for your help. — , Aug 10 '19 at 20:25

Bill Cheng · Answer 1 · 2019-08-08T18:20:32.547

1

Try this

<div *ngFor="let e of data">
    <span>{{e}} element dynamic component</span>
    <span>STATISTIC Component</span>
</div>

https://stackblitz.com/edit/angular-ngfor-odd

edited Aug 08 '19 at 18:20

answered Aug 08 '19 at 17:22

Bill Cheng

926
7
9

Thanks for reply. There are 2 records used for filtering in 1st and 3rd elements. So, I am not sure if I should add 2nd and 4th elements in the ngFor loop. I tried but failed. Could you update your answer by using the code bloack in my question? – Aug 08 '19 at 17:31
please update the image link so that i can try to produce exactly what you want – Bill Cheng Aug 08 '19 at 17:37
1

are the 1st and 3rd dynamic data displaying the 1st and the 3rd employees data or 1st and 2nd? – Bill Cheng Aug 08 '19 at 17:50
I retrieved 2 records called records and display them in 1st and 3rd components. the other components are not related to this record. 1st and the 3rd employees data – Aug 08 '19 at 17:52
Shall I use *ngFor with *ngSwitch? Not sure if it is a good idea? – Aug 08 '19 at 17:54
**I know it seems to be useless to use ngFor in this situation. BUT** if I use *ngFor, the data can be updated, if I do not, the data cannot be updated. For this reason I need to use *ngFor :( – Aug 08 '19 at 17:58
1

just updated the answer, it will show 1st and 3rd data with a static component next to the dynamic one – Bill Cheng Aug 08 '19 at 17:59
It is good approach but I am afraid there are 2 records and when displaying odd records only the first one is displayed :( Because there are no records for 2nd and 4th elements. I know it is an absurd situation. In this case Shall I use *ngFor with *ngSwitch? – Aug 08 '19 at 18:10
1

so you only have 2 records to show and you want to show both of them? – Bill Cheng Aug 08 '19 at 18:18
I retrieved 2 records as filter parameters for component 1 and 3. – Aug 08 '19 at 18:20
I also tried the approach on my Update in the question. It seems to be work, but there is style problems. I will try your answer, but could you pls tell me if the approach in my update is good or not? – Aug 08 '19 at 18:26
1

IMO it will be hard to read and style... try what i have for you... it is probably easy to understand/read and easier to style too – Bill Cheng Aug 08 '19 at 18:29
Many thanks for your help and efforts. I fixed the problem using the code in my Update and giving the inner div width=100%. Voted up ;) – Aug 08 '19 at 18:51
The only problem is that, the 4th component and 2nd component replaced. Any idea? – Aug 08 '19 at 19:04
1

post your stackblitz so that we can help you better – Bill Cheng Aug 08 '19 at 19:05

score 0 · Answer 2 · answered Aug 08 '19 at 18:39

0

If you want to have a static component after every dynamic one, you ca simply include the static component inside the loop as

<div *ngFor="let record of records">
    <p-panel >
        <div comp-employeeList [listFilter]="record.Filter"></div>
    </p-panel>
    <p-panel>
        <div comp-statistics></div>
    </p-panel>
</div>

answered Aug 08 '19 at 18:39

Saksham

9,037
7
45
73

Thanks but as I mentioned above my situation is different and this cannot fix it. – Aug 08 '19 at 18:53

Using *ngFor for odd items

2 Answers2