In the V4 app, there’s a parent component that includes a child component (a toolbar that sticks to the top). There’s a button in the child component that, when pressed, should scroll the screen to the top. How can that be done?
I thought of having a ScrollToTop() function, but I think it needs to be in the parent container, so the child component needs to call it. Is there a way to do so?
@Output
bindings can do this.
Thanks, that should work.
However, upon further digging, I noticed the child needs to talk to another child (ie, a sibling) not the parent. So the structure is like so
- Parent component (app.component.ts, ion-app)
– ion-header
– – toolbar component
– ion-router-outlet
– – list component
The button in the toolbar needs to call a function in the list. Would @input and @output still work, or should I go with something else like a service?
I would use a service in that case, and only after thinking very long and hard about whether the design is going to scale up. Tight coupling between sibling components is something that I usually end up rewriting to make go away, because it really kills maintenance and readability.
1 Like