javascript - Create show more effect using overflow ellipsis Angular 7

Question

I have tried to display a string array. I want to set up show more effect using an ellipsis. I have the following code

const student={};
 student.name=['Student1','Student2','Student3','Student4','Student5','Student6'];

<h5 class="studnames">Student List
<strong>{{ student.name| slice:0:2 }}{{student.name.length > 2 ? '...': ''}}</strong>
</h5>

1. Only need to display 2 names in the line (Student1, Student2, ...)
2. Display remaining names like a small popup when clicking on the 3 dots(click/mouseover)

How to do this. any idea?

Answer 1

I would suggest doing something like:

const student={};
 student.name=['Student1','Student2','Student3','Student4','Student5','Student6'];

<h5 class="studnames">Student List
<strong>{{ student.name| slice:0:2 }}
<span *ngIf="student.name.length > 2" (click)="showStudentsPopUp()" (mouseover)="showStudentsPopUp()"> ... </span>
</strong>
</h5>

And then you can simply implement the showStudentsPopUp in any way you want.

---

For a more practical solution I would suggest looking into some library, I have used Tippy.js in the past and it's really good, with that you could do something like:

const student={};
 student.name=['Student1','Student2','Student3','Student4','Student5','Student6'];

<h5 class="studnames">Student List
<strong>{{ student.name| slice:0:2 }}
  <ng-container *ngIf="student.name.length > 2">
    <span *ngTippy="config"> ... </span>
  </ng-container>
</strong>
</h5>

And that would show a nice tooltip on hover/click which you can populate with the students.

Here you can find tippy.js for Angular: https://www.npmjs.com/package/angular-tippy