comma separated string using ngFor with a condition?

Question

I want to generate comma separated string from an array.

This is my data:

responseData= [{ name: 'Some Data 1', type:'action' }, 
               { name: 'Some Data 2', type:'action' },
               { name: 'Data 3', type:'NA' }, 
               { name: 'Data 4', type:'action' },
               { name: 'Data 5', type:'NA' }];

This is how I'm looping. I only want to loop through action type.

<div *ngFor="let data of responseData; let last=last">
    <div *ngIf="data.type=='action'">
        {{ data.name}} {{last?'':', '}}
    </div>
</div>

But I'm left with another comma at last. How do I remove that?

Any help would be much appreciated. Thanks!

score 4 · Accepted Answer · answered Jan 19 '20 at 18:44

4

The reason last is not getting applied is because the last element is not of the type "action".

As a Fix, You can create a custom function to filter the initial data first and apply the same logic,

<div *ngFor="let data of filterFunction(responsedata); last as isLast">
    <div >
        {{ data.name}}  {{isLast?'':', '}}
    </div>
</div>

DEMO

answered Jan 19 '20 at 18:44

Sajeetharan

216,225
63
350
396

Thank you for the answer. Can this be achieved on html without a function or variable in `typescript` – Dungeon Jan 19 '20 at 18:48
1

no you cannot. you can use pipe instead which again has to be done with TS – Sajeetharan Jan 19 '20 at 18:52

score 1 · Answer 2 · answered Jan 19 '20 at 18:44

Since the filtering for type = action happens inside the ngForOf, the last element still not counted, so last is always false for your case.

I have added a new Array which is filtered based on type = action at the typescript and that works for me. See the example below at stackblitz.

https://stackblitz.com/edit/angular-dfhpan

score 1 · Answer 3 · answered Jan 19 '20 at 18:50

I would use a pipe for this:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'listify'})
export class ListifyPipe implements PipeTransform {
    transform(responseData: Array<any>, responseType: string): string {
        return responseData
            .filter(r => r.type === responseType)
            .map(r => r.name)
            .join();
    }
}

and then call it

<div>{{responseData | listify : 'action'}}</div>

score 0 · Answer 4 · answered Jan 19 '20 at 19:02

You can't use the 'last' binding (which is like checking if current iteration index + 1 is equal to array length) with a visually filtered array - it will not work since the actual array index will not be affected by your filtering.

You can either filter the array before using it in your template:

responseData= [
 { name: 'Some Data 1', type:'action' }, 
 { name: 'Some Data 2', type:'action' },
 { name: 'Data 3', type:'NA' }, 
 { name: 'Data 4', type:'action' },
 { name: 'Data 5', type:'NA' }
]
.filter(item => item.type === 'action');

Then, use it in your template without filtering

<div *ngFor="let data of responseData; let last=last">
    {{ data.name}} {{last?'':', '}}
</div>

...or, better, create a custom pipe which will filter the array and keep proper tracking of the 'last' binding

There are many examples so I will not provide another copy here, you will just need to use it as

...*ngFor="let item of myArray | myFilter;let last...

Oscar de la torre · Answer 5 · 2023-04-27T16:24:02.890

0

You can add a conditional comma before each item value like:

<ng-container *ngFor="let item of list; let i = index">  
   <span *ngIf="i > 0">, </span><span> {{ item.value }} </span>
</ng-container>

or

<ng-container *ngFor="let item of list; let i = index">  
  {{ i > 0 ? ', ': '' }} {{ item.value }}
</ng-container>

edited Apr 27 '23 at 16:24

answered Apr 27 '23 at 16:16

Oscar de la torre

31
3

comma separated string using ngFor with a condition?

5 Answers5