I want to create a list of items in my template, separated by commas, but I don't want the last item to have a comma:
one, two, three
How do I accomplish this with Angular 2's template syntax?
Add a comment
|
3 Answers
I like Eric's answer better (see his comment for a sample Plunker):
<span *ngFor="let item of items; let isLast=last">
{{item}}{{isLast ? '' : ', '}}
</span>
My original answer was to use the optional index in the NgFor microsyntax:
<span *ngFor="#item of items, #i=index">
{{item}}{{i === items.length - 1 ? '' : ', '}}
</span>
An alternative is to use just use CSS ::before syntax, as described here: https://stackoverflow.com/a/31805688/215945
3 Comments
Eric Martinez
Mark Rajcok
Thanks @EricMartinez, I hadn't seen that yet. I will update my answer.
dae721
Current syntax: use let for the *ngFor of course, but also for the #isLast:
<span *ngFor="let item of items; let isLast=last">I think a simpler approach is
<span> {{items.join(", ")}} </span>
9 Comments
Francesco Borzi
in case you need to surround each string with a character, for example the double quotes, you can use:
<span> "{{ items.join('", "') }}" </span>Glenn Van Schil
It didn't work for me when I used this solution in combination with overriding the toString() method of my custom object. But it's indeed the shortest solution for primitive types.
izogfif
How do you insert a pipe in here if you need to transform items using pipe (e.g. array of price objects like
[{amount: 1, currency: 'USD'}, {amount: 2, currency: 'GBP'}] to $1, £2?
christo8989
@izogfif You should create another stackoverflow question and maybe post the link here. Without going into detail, use javascript to build out the string. You don't have to pipe within the
{{ }}.
Flash
tried doing it this way and if repeats my entire array
test: string[]= ['apple', 'banna', 'mango', 'orange', 'pear']; span *ngFor="let fruit of test">{{test.join(", ")}}</span> produces: apple, banna, mango, orange, pearapple, banna, mango, orange, pearapple, banna, mango, orange, pearapple, banna, mango, orange, pearapple, banna, mango, orange, pear L |
I have just needed todo this but my value is in an attribute so the marked answer did not work.
Someone may find this helpful :
I used a pipe, I could have built the string up but felt a pipe would be more readable
CLI
ng g p Delimiter
Pipe
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'delimiter'
})
export class DelimiterPipe implements PipeTransform {
transform(value: string, delimiter: string, isLast: boolean) {
return !isLast ? value + delimiter : value;
}
}
View
<div ngFor="let item of items; let isLast=last"
[innerHtml]="item | delimiter:', ':isLast">
</div>
I needed some html in my view hence my need to use the attribute, eg
<div ngFor="let item of items; let isLast=last"
[innerHtml]="item | safeHtml | delimiter:', ':isLast">
</div>