I'm working on a webpage that has a title at the top, but I want to hide it on smaller devices and make it responsive when the window is resized. Currently, I only show the title when the window width (w) is greater than 450 pixels. However, I'm struggling to recompute the width on window resize. Is there a better approach to achieve this? I'm using Ionic 5 and Angular.
<ion-toolbar>
<!-- Title and link back to homepage -->
<ion-button routerLink="/home" fill="clear" *ngIf="w > 450">
<ion-title>Inventory System</ion-title>
</ion-button>
<!-- Show back button if not on homepage -->
<ion-buttons slot="start" *ngIf="!router.url.includes('/home')">
<ion-back-button defaultHref="home"></ion-back-button>
</ion-buttons>
<!-- Display user avatar, username, and menu if logged in -->
<ion-item slot="end" *ngIf="loggedin">
<!-- Profile Picture -->
<ion-avatar slot="start">
<ion-img src="./assets/icon/defaultUserIcon.svg"></ion-img>
</ion-avatar>
<!-- Username, opens popover menu -->
<ion-button (click)="openMenu($event)" fill="clear">
<ion-label>{{username}}</ion-label>
</ion-button>
</ion-item>
<!-- Show login link if not logged in -->
<ion-item slot="end" *ngIf="!loggedin">
<ion-button (click)="login()" fill="clear">
<ion-label>Login</ion-label>
</ion-button>
</ion-item>
</ion-toolbar>
The width (w) is calculated here:
import { PopoverComponent } from './../popover/popover.component';
import { PopoverController } from '@ionic/angular';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss'],
})
export class NavbarComponent implements OnInit {
public w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
constructor(private popCtrl: PopoverController, public router: Router) {
}
ngOnInit() {}
async openMenu(ev: any){
const popover = await this.popCtrl.create({
component: PopoverComponent,
event: ev,
});
return await popover.present();
}
}