I have a dynamic table containing data populated from a loop. When the text content exceeds 10 characters, an automatic 'show more' link should appear to allow users to see the full text by expanding it and reducing the length of the displayed content. Clicking 'show more' will expand the text to show all remaining characters with a 'hide less' link allowing users to collapse the text back to its shortened state. The expand/collapse feature should work independently for each item. Please refer to the code snippet below:
home.component.html
<table>
<tr *ngFor="let items of statusdata"><td>{{items.groupname}} <span>Show more..</span></td></tr>
</table>
home.component.ts
import { Component, OnInit } from '@angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
declare var $: any;
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
statusdata: any;
ngOnInit() {
this.statusdata = [{"groupid":1,"groupname":"project1project1project1project1project1project1project1project1project1"},{"groupid":2,"groupname":"project2project1project1project1project1project1project1project1"},{"groupid":3,"groupname":"project3project1project1project1project1project1project1project1project1project1"}];
}
}