Expand only one row in the table - html

Question

I have a table with rows, where I list the data from json file.
In one row I'm slicing the data to show only 100 symbols.
I want to display full text when user click on the row. I managed to do it, but It opens all rows. How to do it only for the one row, which clicked?
<tr *ngFor="let lfiexport of lfilist | filter:searchText">
<td (click)="fullViewFlag= !fullViewFlag" class="text-left">
<span *ngIf="fullViewFlag">{{lfiexport.desc}}</span>
<span *ngIf="!fullViewFlag">{{lfiexport.desc | slice:0:100}}</span>
</td>
</tr>

Answer 1

You are using same fullViewFlag multiple times, so it will effect all the rows. So, I suggest you maintain different fullViewFlag properties for each object and can try the below code
Working stackblitz
TS file
export class AppComponent {
name = 'Angular ' + VERSION.major;
lfilist = [{
desc: [1, 2, 3, 4, 5, 6]
}, {
desc: [7, 8, 9, 10, 11, 12]
}, {
desc: [13, 14, 15, 16, 17, 18]
}].map(item => {
return {
...item,
fullViewFlag: false
}
});
}
Template file
<tr *ngFor="let lfiexport of lfilist">
<td (click)="lfiexport.fullViewFlag = !lfiexport.fullViewFlag" class="text-left">
<span>{{lfiexport.fullViewFlag ? lfiexport.desc : lfiexport.desc | slice:0:2}}</span>
</td>
</tr>
No need of *ngIf we can use terinary operator ?: