How do I add a custom component to every single page's ion-content?

Hi there,

I have a question regarding whether it is possible to make something like a global component that is present on all of my pages inside the ion-content area of my app.

My idea is the following: Create a scroll indicator arrow that is either on the top of the screen or on the bottom of the screen depending on whether the user has scrolled up or down the screen entirely.

So whenever the user is at the top of the page and the user is capable of scrolling down I want to display a down arrow at the bottom of ion-content displaying that the user can still scroll down.

Whenever someone clicks that button the user should jump down to the bottom of the page, same goes for scrolling to the top of the page.

I figured I could write my own custom component and then add it to all and every single page inside my ionic app’s ion-content. But this seems counter intuitive since I’d have to do this for every single page.

Is there perhaps a way to create a custom component that is added to each page’s ion-content element globally so that I won’t have to add it manually to each html page?

Also, I would need to access the ion-content’s scrollTop property and scrollBottom property of whichever page this component is added.

Please let me know your thoughts on this.

1 Like

Mmm, no, adding the component to every page is the correct way to do things.

Remember, Keep it simple. You do not or should not over complicate things

Is there perhaps a way to create a custom component that is added to each page’s ion-content element globally so that I won’t have to add it manually to each html page?

Complicated, this should not be done.