Angular: Proper way to inform nested property change between different components

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 person, while 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

50 thoughts on “Angular: Proper way to inform nested property change between different components”

Leave a Comment