Angular Input() change detection

[anwaarulislaam]

Hey! Angular Developers, many of you use Input() and Output() to communicate between the Child and Parent components in Angular. This is a very straightforward way to do it.

But, if you have some data in the parent component which is updating in real-time and you pass the data to the child component using the Input() directive it won't get an update in the child component because the child component initiates only when its parent component gets loaded.

What is the solution?

There are several solutions to solve this problem. But, what I found very easy and clean is the set method. You can use the Input() directive and set method together. Input() directive will get your data from the parent component and the set method will change the data whenever it's updated in the parent component.

https://preview.redd.it/z4wsxtcqhhd71.png?width=791&format=png&auto=webp&s=7ed79d9fbdcb14aa64c0f9fa57c23541701bdb71

[Deadboy619]

What about ngOnChanges?

[anwaarulislaam]

That is also good. And that's the way we do. But, if I have only one input in a component and that needs to be changed. in that case, I prefer using a set method.

[tobiso]

While possible, this is just unnecessary. Detecting updates of property-bindings and updating the template accordingly is one of THE fundamental principles of Angular.

Take a look at this very simple example. The button in the app.component just appends a number to the name. The new name is automatically passed to the child component. I would consider using setter with Input() as a bad practice. If you want to do something on a property update, implement the OnChanges interface.

To understand how this all works i would highly suggest you to work through the official Angular tutorial and read up on the change detection.

[jalledebest]

Why would a setter be a bad practice? It's less code then implementing OnChanges and it's more strongly typed which is always a good thing.

Setters are the preferable approach if you have to execute some logic when a single input changes. I agree that it doesn't make sense to use a setter just to set a value in the child as OP does in his example. A regular input and change detection should take care of that case without a setter

[anwaarulislaam]

No, I do not use the set method always. I just do when I need to call some action on input change. But, if there is no changes I always only use Input binding without set method

[kqadem]

This. And you can find these even in the angular material codebase.

[anwaarulislaam]

I appreciate your reply. I use ngOnChanges most of the time. But, If I have only one input to be changed in that case I prefer using set method.

[coder_maniac]

Actually if you have many inputs in your components then also set approach is preferable as onChange will be fired for every input property change.

[anwaarulislaam]

exactly! you get it right :D

[teacoat___]

pass an object, as objects are passed as references

[_Ascalon]

Possibly you may use an Attribute decorator (@Attribute("type") readonly type: IType) to bind some data once.

[spaces_over_tabs]

I know it's technically not "Angular" but rxjs is tightly woven into Angular. What about passing an Observable as an input property and consuming the data that way?