I Am new to angular2. Trying to understand the usage of @Input in a better way. We can pass values from parent component to child using @Input also we can create a service variable and inject it to the parent component and can access them in child components. Which way would be better? I am getting these values through route resolves. I am feeling skeptical to use @Input when there is no binding of it with user input.
3 Answers
Generally there are two types of components - Presentational and Container or also sometimes called stateful and stateless. Here is the expert from this article explaining the difference:
Presentational components:
- Are concerned with how things look.
- Receive data and callbacks exclusively via props.
- Rarely have their own state (when they do, it’s UI state rather than data).
Container components:
- Are concerned with how things work.
- Provide the data and behavior to presentational or other container components.
- Are often stateful, as they tend to serve as data sources.
Presentational components should receive as much data as possible in a declarative way through input bindings. Container components should use DI as much as possible.
2 Comments
Luke P. Issac
Hi, Maximus, Do you see any drawback if we are using @Input in angular2 for container components. It seems that either way has no harm.
Max Koretskyi
what I've shown in my answer is just one way of looking at things, using inputs for container components is fine as well
I'm just guessing but like anything it depends on the use case.
If your child component is acting like a stateless component but depends on the data the parent container has state-like access then you'd probable want to use input to pass down the data to the child components.
For example one case that comes to mind is the use of form groups and formcontrols which the container keeps track of sort of the formgroup logic/state and on submit if the form is reactive will send a data object back or least should.
I'm not familiar myself but the use case for input that makes sense is when you have just rendering visual components that need just some data referenced from the parent container.
hope that makes sense. :) or least shed light on one use case hehe
http://learnangular2.com/inputs/ "most developers need to know how to pass data into components to dynamically configure them."
another good pictoral guide: https://www.sitepoint.com/angular-2-components-inputs-outputs/
1 Comment
Luke P. Issac
In my use case there is no input controls or forms to get the data from user. So am looking to remove @Input to pass data and instead going to use a service variable and inject it to required child components.
Well, to be precise @Input() has nothing to do with user input as you think. It is basically used for passing data from parent component to child component. I agree that the name Input() leads to confusion, but its usage is different. Coming to service injection, this is not related to parent-child. Components at any hierarchy can inject services independently as they need. To conclude it, best method to pass data from parent to child is using @Input().
4 Comments
Luke P. Issac
Don't u think using @Input will create a two way binding which is not actually required in my case. This could be a performance downfall.
Amit Chigadani
No.
@Input() is one way binding, If you are passing the object then it becomes two way because reference to object remains the same. Any thing other than object will be one way binding.Luke P. Issac
I think in the element [somedata] creates one way and [(somedata)] creates two way data binding. I tried editing my first comment but was not able to. Either way there will be binding.
Amit Chigadani
Yes ` [(somedata)] ` does two binding. But I don't think you can do ` [(somedata)] ` for
Input() property. That is not valid I guess.
@Inputimo because you can use theOnPushchange detection strategy with it and lower the load of the change detection system.