Insert an ellipsis within the ngFor iteration

Question

Insert an ellipsis within the ngFor iteration

I'm currently working with a table in which the td elements are filled with data structured like this:

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

My challenge is to add an ellipsis to the span element if its character length exceeds 15. I've tried using an ellipsis pipe, but it applies the ellipsis to every element in the array.

Current output: Assistant Surgeon, Assistant Surgeon Pedia..., Assistant Surgeon techn..., Assistant Surgeon

Desired output: Assistant Surgeon, Assistant Surgeon Pediatrician, Assistant Surgeon techn...

Any suggestions on how to achieve this specific ellipsis implementation?

angular typescript

Answer 1

Answer №1

Check out this solution:

<div style="width:50%">
  <ul *ngFor="let item of data.items; let i=index">
     <li *ngIf="i % 2 === 0">{{ item }}</li>
  </ul>
</div>

This code snippet utilizes Angular's structural directives to display items in a list conditionally based on their index position. It only displays items with an even index.

Answer 2

Check out this solution:

<div style="width:50%">
  <ul *ngFor="let item of data.items; let i=index">
     <li *ngIf="i % 2 === 0">{{ item }}</li>
  </ul>
</div>

This code snippet utilizes Angular's structural directives to display items in a list conditionally based on their index position. It only displays items with an even index.

Insert an ellipsis within the ngFor iteration

Answer №1

Similar questions

Verify if the currentRoute begins with a specific text pattern (such as something/something/*...) in Angular

Upon closing the browser, the Angular ngx-cookie-service data disappears

Angular messaging service error TS2769: There is no overload that fits this call

A guide to incorporating border radius to images within a composite image with sharp.js in Node.js

Tips for dynamically updating localeData and LOCALE_ID for i18n websites during the build process in Angular 9

Is there an alternative method to incorporate the 'environment.ts' file into a JSON file?

How do I manage two components on the same routing level in Angular with query parameters?

Issue with Angular 2 directive update detection; unresolved directive not refreshing

What is the best way to iterate through a collection of two or more arrays in order to determine the total length of all

Guide to setting up a one-to-many self relation entry in Prisma

In Typescript, which kind of event is suitable for MouseEvent<HTMLDivElement>?

Dependency error reported in Angular update

Using SignalR to implement CRUD operations within a Hub or Controller

Receiving data from a service in Angular 2 with rxjs subscribe throws an error: it is not a

The Angular module loaded lazily encountered a 401 error

What is the best way to combine API calls using rxJs subscribe and map in Angular?

What is the best way to decide on a method's visibility depending on who is calling

Strategies for modifying the title attribute within an <a> tag upon Angular click event

Is the Angular maxlength parameter causing issues with user input?

The module 'Express' does not have a public member named 'SessionData' available for export