Hi,
Previously I was using duplicate code in all my pages to show a custom header with
elements.
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 :
@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.id = this.authProvider.getUser().uid;
this.profileProvider.getProfile(this.id).subscribe((profile: CustomUserProfileModel) => {
this.customUserProfile = profile
})
// search for beacons
this.platform.ready().then(() => {
if(this.platform.is('cordova'))
this.searchBeacon()
})
}
Header component html :
<ion-header>
<div class="padding-header">
<ion-item no-lines class="borderless">
<ion-avatar item-start>
<img [src]="customUserProfile?.photoURL" alt="User Profile Picture" />
</ion-avatar>
<table>
<tr>
<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 :
<userheader></userheader>
Where and when should I use this resize function?
Or am I screwing up now?
Thanks