*ngFor should support separators

[nhnb]

🚀 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>.

[nhnb]

@Airblader thank you for your feedback. I tried to address it by editing the original comment. Most notable, I added two more real world examples, which showcase the reduction in template complexity and expected output.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[alxhub]

Agreed - if this is needed in a particular application, custom structural directives are a better solution. Attempting to solve this problem generally would be a major undertaking.