I have an application that shows and manipulates users’ information in a table with many columns. The user model has quite a few deep nested properties, each table column represent a property. To better explain, I created this simplified app at stackbliz
Basically, each column is a component that has an @Input
Location property value is changed by clicking itself, another component
LOS needs to change its text colour, if location becomes ‘J’.
My issue now is, the property change will not trigger the change detection to update the view in another component, since they all are provided the same @Input and the reference remains unchanged.
In my real application, I used the
colour pipe, and I know I can enable
impure to force it to run in every change detection so the text colour can change synchronously. But it may not be the best option because 1. It will run too many times, and when I have the same need in another place, a big number of impure pipe will take more time to run when it’s unnecessary. 2. Pipe is not needed everywhere.
Also, I can make it work by using getter or a function to return the property in another component, I have included the code as comment in stackblitz app.
But I wonder if there is another better, cleaner and intuitive way to achieve the requirement so that it doesn’t have unnecessary overheads. Either a new way to make it happen, or a better design of the data model, component structure, etc. to avoid the issue.
Thanks in advance