Ionic footer best practice

Question

Hello everyone I got a question, what's the best suitable way and practice to implement an ion-footer component, I got this footer component which is large used in all app, with differents buttons,labels and actions, 2 buttons in any screen and sometimes a label and a button inline in each screen, how would you handle something like this to avoid replicated code and best practice.

thanks a lot.

Answer 1

This can be achieved with the page-selector property of a component, provided by Angular.

Create a new component with desired html, css and ts code. Take note of the selector specified in the @Component directive. For example, app-default-page

Import this component in the app.module or feature module depending upon the project.

In every HTML page where the design is desired, add the page selector within the ion-footer tags like this

<ion-footer>
    <app-default-page></app-default-page>
</ion-footer>