*ngFor should support separators

🚀 feature request

Relevant Package

This feature request is for @angular/common regarding *ngFor.

Description

*ngFor should make it easy to output a list with separator characters in cases <li> or table rows are not desired. At the moment, you need code like the following simplified example:

<span *ngFor="let fruit of fruits; first as isFirst"><ng-container *ngIf="!isFirst">, 
    </ng-container>{{fruit}}</span>

• Note 1: There must be no whitespace before the ng-containerhosting ngIf and before the closing span. Otherwise you will end up with a white space before the comma in the final output.
• Note 2: In this simplified example, you end up with the separator character inside of the hosting element. Therefore, it is likely that the *ngFor directive needs to be pushed up to an additional ng-container-element in real world use cases.

Describe the solution you’d like

*ngFor should support a separator attribute, which contains a string to be added between pairs of entries:

<span *ngFor="let fruit of fruits; separator=', ' ">{{fruit}}</span>

There will be no comma, if the list is empty or has one entry only. But if there are more entries, a comma will be added between them.

Further use cases

The following two use cases show that the proposed feature improves readability significantly:

Use case: Tooltips on items for accessibility reasons

Current:

<ng-container *ngFor="let fruit of fruits; first as isFirst"><ng-container *ngIf="!isFirst">, </ng-container>
    <span [title]="fruit.name">{{fruit.abbriviation}}</span></ng-container>

Proposed:

<span *ngFor="let fruit of fruits; separator=', ' "
   [title]="fruit.name">{{fruit.abbriviation}}</span>

Result:

<span title="Apple">AP</span>, 
<span title="Orange">OR</span>

Use case: Items as links

Current:

<ng-container *ngFor="let fruit of fruits; first as isFirst"><ng-container *ngIf="!isFirst">, </ng-container>
    <a href="/details/{{fruit.id}}">{{fruit.name}}</a></ng-container>

Proposed:

<a *ngFor="let fruit of fruits; separator=', ' " 
   href="/details/{{fruit.id}}">{{fruit.name}}</a>

Result:

<a href="/details/47">Apple</a>, 
<a href="/details/42">Orange</a>

Describe alternatives you’ve considered

The alternative is the current approach of using a nested ng-container with a *ngIf-directive.

Possible extensions of the feature request

• It might be a good idea to add a lastSeparator-attribute as well, in order to allow for a nice conclusion of the list with “and” or “or”.

<span *ngFor="let fruit of fruits; separator=', ' lastSeparator=' and ' ">{{fruit}}</span>

• It might be useful to allow a template references as alternative to a string as separator, similar to the way *ngIf supports “else”.

[Airblader]

I’m going to speak out against this proposal for the following reasons:

1. Following the way structural directives desugar, your proposed example wouldn’t even produce the same output as your introduction example; you’d instead end up with a lot of span elements.
2. This adds significant API surface to ngFor for something I think is a pretty specific case with no really clear benefit over using the existing first, last. Using those is much more expressive in my opinion.
3. Your case can be solved much easier without ngFor just using <span>{{ fruits.join(", ") }}</span>.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}