Check if function within page exists from custom component, and call it from within custom component

Ionic Framework
1

Hi there,

Suppose I have a custom component that has a buttion with a (click) in it that calls a back() method within this custom component.

What I want to do is check if there is a close() method on the page that the custom component is used on.
If it exists, the custom component should call that close() method from the page instead of it’s own back() method.

How would I accomplish this?

2

To solve my issue I had subscribed to an event on ionViewDidEnter that would call the function within my page.

I had then created a Input() eventMethod: any;
inside of my component, that would publish the event that was send to the eventMethod attribute, which in turn calls the function within the page.

so for example my component would look like: <my-app-component [eventMethod]="‘my-event-name’">

This seems to work.

3

This is likely not going to convince anybody of anything, but I’ll tilt at the windmill anyway.

The single most important reason the concept of “components” exists is separation of concerns / encapsulation.

Components should never care about or even know anything about their hosting environment, or else they aren’t meaningful entities. If I found myself faced with a situation like this, I would invert the bindings, and make the embedded component expose an (onClose) @Output binding.

4

Thank you rapropos, that is indeed a beter solution.

I’ve already done it my own way and it’s working. But next time I’ll use an output binding instead of input binding with event names.

I might change this later on, but right now I’m more concerned with finishing a deadline.

If it works, it works.
I’ll refractor when there is more time for me.

I get the idea of component encapsulation. I just haven’t dived deep enough into component creation yet. This is one of the not so many times I thought it would be a good idea to create a component. Because it was used on several places within my app.

I think I should’ve made more components now that I think of it.

I wasn’t much aware of Output bindings until now. Or I haven’t fully comprehended them yet.

In any case, my usecase was that I was creating a modal with a hero transition animation that need to be reverted when the back button was pressed on specific pages. Each of these pages had their own transition effects.

I couldn’t quickly figure out how to do this with output bindings so I went with events.