Adding Custom Header

I want to add a custom header (component)

My app.component.html

<ion-app> <app-header></app-header> <ion-router-outlet></ion-router-outlet> </ion-app>

When I do like this header goes on top of the content and won’t take it’s own space. Also I’ve tried to add ion-router-outlet inside ion-content tag, but that brakes content scrolling. How can I add custom header and not break stuff?