Using comma as a list separator in Angular 2

angular angular2-template
Mark Rajcok picture Mark Rajcok · Dec 2, 2015 · Viewed 33.7k times · Source

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?

Answer

Mark Rajcok picture Mark Rajcok · Dec 2, 2015

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

Related questions

Angular HTML binding

I am writing an Angular application and I have an HTML response I want to display. How do I do that? If I simply use the binding syntax {{myVal}} it encodes all HTML characters (of course). I need somehow to …

Read More
OrderBy pipe issue

I'm not able to translate this code from Angualr 1 to Angular 2: ng-repeat="todo in todos | orderBy: 'completed'" This is what i've done following the Thierry Templier's answer: Component template: *ngFor="#todo of todos | sort" Component code: @Component({ selector: 'my-app', templateUrl: "./…

Read More
Angular2 disable button

I know that in angular2 I can disable a button with the [disable] attribute, for example: <button [disabled]="!isValid" (click)="onConfirm()">Confirm</button> but can I do it using [ngClass] or [ngStyle] ? Like so: <button […

Read More