Proper usage of the Content resize function


Previously I was using duplicate code in all my pages to show a custom header with
So I refactored these header elements to a new component which is included in all pages
But after this all in my pages is behind the header parts.

I read around a bit and this should be solved with the resize property of Content.
But I don’t get it working.

Header component :

  selector: 'userheader',
  templateUrl: 'userheader.html'
export class UserheaderComponent {
  text: string;
  id: string;
  customUserProfile: CustomUserProfileModel;
  public beaconMsg = 'Beacon zoeken...'
  public beaconFound = false

  constructor(  private authProvider: AuthProvider, 
                private profileProvider: ProfileProvider, 
                private alertCtrl: AlertController,
                private ibeacon: IBeacon,
                private platform: Platform ){ = this.authProvider.getUser().uid;
    this.profileProvider.getProfile( CustomUserProfileModel) => {
        this.customUserProfile = profile
    // search for beacons
    this.platform.ready().then(() => {

Header component html :

    <div class="padding-header">
        <ion-item no-lines class="borderless">
                <ion-avatar item-start> 
                        <img [src]="customUserProfile?.photoURL" alt="User Profile Picture" /> 
                <td class="headerLeft">
                    <span class="big">{{customUserProfile?.firstname}}</span><br/>
                    <span>{{customUserProfile?.lastname}}<ion-icon name="wifi" small *ngIf="beaconFound"></ion-icon>
                        <ion-icon name="alert" *ngIf="!beaconFound" small (click)="searchBeacon()"></ion-icon></span>

This header component is simply imported in the pages which html on top says :


Where and when should I use this resize function?
Or am I screwing up now? :slight_smile: