It might be beneficial to extract the comments code into a separate component as it can simplify the template and reduce complexity. However, whether or not to do this is open to debate.
If you choose not to separate the comments as a component, you could instead maintain individual variables to store the data for each comment:
data = [
{
ID:1,
Name : "Name",
currentState: "pause"
},
{
ID:2,
Name : "Name2",
currentState: "pause"
},
{
ID:3,
Name : "Name3",
currentState: "pause"
},
{
ID:4,
Name : "Name4",
currentState: "pause"
},
];
For the HTML implementation, you can consider the following structure:
<div class="Submitcomments" *ngFor="let c of data; let i = index;">
<div>
<div class="row rowComments" style="margin-top: 11px;">
</div>
<div class="form-group">
<textarea type="text" class="form-control AreaText" rows="2"></textarea>
</div>
<div class="row" style="margin-top: -20px; margin-left: 5px;">
<button *ngIf="c.currentState=='pause'" class="btn reply" (click)="c.currentState='start' ; Execute(i)">Yes</button>
<button *ngIf="c.currentState=='start'" class="btn reply1" (click)="c.currentState='pause'; Execute(i)">No</button>
</div>
</div>
</div>
Alternatively, you could keep a separate array to manage the states if you prefer not to alter the original object array:
currentStates = [
"pause",
"pause",
"pause",
"pause"
]
data = [
{
ID:1,
Name : "Name"
},
{
ID:2,
Name : "Name2"
},
{
ID:3,
Name : "Name3"
},
{
ID:4,
Name : "Name4"
},
];
Incorporate these states in the HTML like so:
<div class="Submitcomments" *ngFor="let c of data; let i = index;">
<div>
<div class="row rowComments" style="margin-top: 11px;">
</div>
<div class="form-group">
<textarea type="text" class="form-control AreaText" rows="2"></textarea>
</div>
<div class="row" style="margin-top: -20px; margin-left: 5px;">
<button *ngIf="currentStates[i]=='pause'" class="btn reply" (click)="currentStates[i]='start' ; Execute(i)">Yes</button>
<button *ngIf="currentStates[i]=='start'" class="btn reply1" (click)="currentStates[i]='pause'; Execute(i)">No</button>
</div>
</div>