How to avoid redundant code?

movadee · September 10, 2017, 2:08am

Hello, I can’t figure out how to avoid a code redundancy in my project. It seems like I can create components for header and footer, and yet, I need to ion-header and ion-footer in every page, otherwise code doesn’t behave as expected. Here is a page example:

<ion-header>
  <navbar-component [title]="pageTitle"></navbar-component>
</ion-header>  

<ion-content>
  HOME
</ion-content>

<ion-footer>
  <footer-component></footer-component>
</ion-footer>

Instead, I would like to have one main page with header and footer and pass into it a different content. Is it possible?

rapropos · September 10, 2017, 4:11am

Can’t you put the shared stuff inside app.html?

movadee · September 10, 2017, 5:08pm

I tried… but it’s not behaving the same way. For example the footer is covering part of the content if I place it only in the app.html (pic 1). If I indicate the footer inside the html page itself, the content is not covered (pic 2)
PIC 1:

PIC 2: