I want to implement a feature where clicking on "see more" will reveal the full content within a table cell. The criteria for displaying "see more" is when the text inside the table cell spans more than 3 lines, then show the prompt and expand to show the complete content upon click.
The width is currently set at 318px but may vary based on user actions.
To calculate the number of lines, I can set the line-height of the table cell to 21px. However, dealing with an array containing random text elements whose size increases dynamically, potentially reaching thousands or more, makes it inefficient to store the status of each element regarding the number of lines.
Is there a more efficient approach that can be applied universally to all text elements in the array?
Here is the link to stackblitz:- https://stackblitz.com/edit/angular7-test-mndgc5?file=app%2Fapp.component.html
.ts
// The 'textsss' array is dynamic and can have hundreds of elements
textsss = [
"In 2005, Nature published a peer review comparing 42 science articles from Encyclopædia Britannica and Wikipedia and found that Wikipedia's level of accuracy approached that of Britannica. Time magazine stated that the open-door policy of allowing anyone to edit had made Wikipedia the biggest and possibly the best encyclopedia in the world, and was a testament to the vision of Jimmy Wales.",
"005, Nature published a peer review comparing 42 science articles from Encyclopædia Britannica and Wikipedia and found that Wikipedia's level of accuracy approached that of Britannica.",
"abcdffff",
"ished a peer review comparing 42 science articles from Encyclopædia Britannica and Wiki",
.
.
.
.
]
ngAfterViewInit(){
this.viewHeight = this.elementView.nativeElement.offsetHeight;
console.log( this.viewHeight);
this.lines = Math.round(this.viewHeight/ 21);
console.log(this.lines);
if(this.lines > 3){
this.dynamicTextHeight = 3 * 21;
}
}
expand(){
this.dynamicTextHeight = this.lines * 21;
}
.html
<table class="table">
<tbody >
<tr *ngFor="let text of textsss;let i = index;" [style.height.px]="dynamicTextHeight">
<td #mainScreen>{{i + 1}}. <span *ngIf="lines > 3" (click)="expand()">... see more</span>{{text}}</td>
</tr>
</tbody>
</table>