I plan to incorporate three buttons in my project (Download, Edit, and Upload).
Upon clicking the Download button, a function is triggered, changing the button to Edit. Clicking the Edit button will then change it to Upload, and finally, clicking the Upload button will transform it back to Download.
The challenge I'm facing is altering the specific button on the line where it was clicked.
Although I attempted to pass the index parameter to the function, it didn't produce the desired outcome.
To toggle the visibility of buttons based on executed functions, I resorted to using JavaScript like (example)
$(".class").css({"display": "none"});If anyone can offer guidance or assistance, I would greatly appreciate it.
.html
<div *ngFor="let item of items; let i = index">
<div class="d-flex flex-row" style="margin-top:16px">
<div class="p-2">{{item.id}}</div>
<div class="p-2">{{item.name}}</div>
<div class="p-2 bg-primary" style="margin-left:auto">
<button (click)="download()">Download</button>
<!-- <button (click)="edit()">Edit</button>
<button (click)="upload()">Upload</button> -->
</div>
</div>
</div>
.ts
items=[{
id:1,
name:"item1",
},
{
id:2,
name:"item2",
},
{
id:3,
name:"item3",
},]
download(){
//change button download to button EDIT
}
edit(){
//change button edit to button Upload
}
upload(){
//change button upload to button Download
}
https://i.sstatic.net/oMxaD.png
By clicking the download button, I aim to run the download function() and switch the button to edit only on the respective line.