child component writes data in console multiple times in angular

0
votes

I'm passing data to child component input property from parent component. I'm showing that data in html table in child component. Also I've added an extra button called "Add" in the loop with [disabled] property. And I'm trying to enable/disable the button by calling "enableButton(item)" method. I'm just trying to show the data in the console. So, I just added console.log(item) inside enableButton() method.

my question is why it is repeating the items in the console. I'm expecting only 4 items in the console window?

Here is the sample app that I've created in stackblitz:

https://stackblitz.com/edit/angular-ivy-tt5fi7?file=src%2Fapp%2Fhello.component.ts

enter image description here

In my actual project, I'm doing the same thing. The only difference is, I'm using p-table and p-column. I've noticed that data is being repeated for 1000 of times in the console window. not sure why?

Can someone explain why and provide best solution to achieve this ?

1
angulartypescript

1 Answers

1
votes

The disabled attribute's value is determined by the enableButton function.

This function is therefore called on every Angular tick and for each input.

That's why you don't bind to functions in the template.