I have following HTML code:
<table>
<tr *ngFor='let product of products'>
<td>
<button [hidden]="hidebutton" (click)="Follow(product.Id)">Follow</button>
</td>
</tr>
</table>
And corresponding click event in my Typescript followproduct.component.ts:
@Component({
---
---
})
export class followproduct implements onInit{
hidebutton: boolean = false;
Follow(productId: number) {
---
this.hidebutton = true;
}
}
Upon clicking on Follow button of one product, all the buttons of other product in iteration gets hidden-and that's obvious too, as I am allotting the hidden option to iterative button tag.
Is there any way to hide, update or change the button of only selective iteration of *ngFor?
garethb :
Make hidebutton an array. Something like this\n\n<table>\n <tr *ngFor='let product of products'>\n <td>\n <button [hidden]=\"hidebutton[product.Id]\" (click)=\"Follow(product.Id)\">Follow</button> \n </td>\n </tr>\n</table>\n\n\nAnd in your controller\n\n@Component({\n ---\n ---\n})\nexport class followproduct implements onInit{\nhidebutton: any[] = [];\nFollow(productId: number) {\n ---\n this.hidebutton[productId] = true; \n }\n}\n",
2016-08-17T06:56:22
micronyks :
That's because all product share same variable named hidebutton. What you have to do is, create a new variable for each product as shown below,\n\n<tr *ngFor='let product of products'>\n <td>\n <button [hidden]=\"product.hidebutton\" \n (click)=\"Follow(product.Id,product.hiddenbutton)\">Follow</button> \n </td>\n</tr>\n\n\n\n\nexport class followproduct implements onInit{\n//hidebutton: boolean = false;\nFollow(productId: number,hidebutton:boolean) {\n ---\n\n //if(hidebutton==false)\n\n hidebutton= true;\n\n //hidebutton =!hidebutton; \n }\n}\n",
2016-08-17T06:58:57