I am facing an issue with my HTML code. I have a list of data where each row has an edit button to update the specific record of that row. However, when I click on the edit button, I want only the form under that particular row to open for updating the record. I have used ngFor for the list and ngIf for the div in my HTML code.
Here is my HTML CODE:
<div class="col-sm-4" *ngFor="let album of calls | async ; index as i">
<div class="card">
<div class="card-body">
<a style="border:1px solid red">{{album.id}}</a>
{{i}}
<a style="border:1px solid black">{{album.title}}</a>
<button (click)="onClick(album)">Edit Click</button>
<form *ngIf="subdiv">
<a style="border:1px solid black">{{album.title}}</a>
<button (click)="onEdit(album)">Submit</button>
</form>
</div>
</div>
</div>
My TS Code:
onClick(user: any) {
this.subdiv= true
console.log(user);
}
Currently, the problem I am facing is that whenever I click on the edit button of any list item, all the forms from the list items are showing up at once.