Ionic V4 Call parent function from containing component

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