0

I'm doing a website where I have to present the specialties of a chef, the data was collected from the backend and I present them with an ngFor in the following way:

<div *ngFor="let i of item.specialty">
 <p  style="display: inline-block;"> {{i.name}}, &nbsp; </p>
</div>

As you see add a comma to show the different specialties followed by a comma, the problem is that the last element is also added a comma, How can I control so that the comma does not appear in the last element that brings the ngFor?

Gerardo Gutiérrez
  • 13
  • 4
  • Did you read [the docs](https://angular.io/api/common/NgForOf)? There's a local variable that tells you when you're on the last item. – jonrsharpe Sep 06 '18 at 22:51
  • Possible duplicate of [Angular io (4) \*ngFor first and last](https://stackoverflow.com/questions/46930242/angular-io-4-ngfor-first-and-last) – jonrsharpe Sep 06 '18 at 22:51
  • yes, if you mean the variable "last", but I dont know how to use this case – Gerardo Gutiérrez Sep 06 '18 at 22:53
  • Well what did you try, and what exactly is the problem with it? The code you've posted doesn't even seem to attempt to access it, much less use it to implement what you describe. – jonrsharpe Sep 06 '18 at 22:54

1 Answers1

1

Use the following code last of *ngFor it has different properties like index, first, last, even, odd

<div *ngFor="let i of item.specialty; let last = last;">
 <p  style="display: inline-block;"> {{i.name}}
     <span *ngIf="!last">, &nbsp;</span>
 </p>
</div>
Abel Valdez
  • 2,368
  • 1
  • 16
  • 33