[Fixed] Add elipsis in ngFor loop

Issue

I have a table where td is getting data as

 <td style="width:15%">
      <span *ngFor="let org of rowData.organization; last as isLast">
         {{org?.name}}<span *ngIf="!isLast">,</span>
      </span>
</td>

I want to add ellipsis on span if character length is greater than 15
if I use ellipsis pipe then that is working on every element of array

Assistant Surgeon, Assistant Surgeon Pedia…, Assistant Surgeon techn…, Assistant Surgeon

any idea how to achieve

Assistant Surgeon, Assistant Surgeon Pediatrician, Assistant Surgeon techn…

Solution

Try this:

<td style="width:15%">
  <span *ngFor="let org of rowData.organization; last as isLast">
     {{!isLast ? (org?.name) +',' : (org?.name.length > 15  ? (org?.name | slice:0:15)+'...' : org?.name)}}
  </span>
</td>

Added a shorthand if/else "!isLast", if not, it will just display the element as is, if yes, another shorthand if/else with a condition that checks if the element’s length is greater that 15, if yes it will add ellipsis, of not it will just dipslay the element as is.