How to avoid redundant code?

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:

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



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

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

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: