Using the Angular Slice Pipe with " , " and " ... " - html

Question

I wanted to use the Slice Pipe so a list will stop showing after 5 elements, so far so good only problem is I want to use a " , " to seperate them and after the 5th element I want to have this" ... " I tried various things like a custom pipe or the truncate Pipe but nothing helped me. Can someone maybe give me a pointer where my mistake lies?
<div class="farmer-common-products "
*ngFor="let commonCategory of farm.commonProductCategories | slice:0: 5 " >
{{ commonCategory.name }}
</div>

Answer 1

To solve your problem you can use local variables in your *ngFor (see docs). Like in the following example:
<div class="farmer-common-products "
*ngFor="let commonCategory of farm.commonProductCategories | slice:0: 5; let last = last">
{{ commonCategory.name }}
<span *ngIf="!laste">,</span>
<span *ngIf="last && farm.commonProductCategories.length">...</span>
</div>
Or you can implement a Pipe, which returns you a string in your desired format:
#Pipe({
name: 'formatCategories'
})
export class FormatCategoriesPipe implements PipeTransform {
transform(arr: any[]): string {
let text = arr.slice(0, 5).join(',');
if (arr.length > 5) {
text += '...';
}
return text;
}
}