How to hide title on window resize?

Posted on by

I have this page, on the top there is a title which I want to hide on smaller devices, preferably let it be hidden responsivly when the window is resized.
Right now I’ve set it to only show when w is greater than 450, w is computed once when the navbar is loaded, I havent figured out how to recompute it on window resize, is there a better way i could be doing this? Im using Ionic 5 and Angular

<ion-toolbar>
  
  <!-- Titel og link tilbake til hjemmeside -->
  <ion-button routerLink="/home" fill="clear" *ngIf="w > 450">
    <ion-title>Inventar System</ion-title>
  </ion-button>
  
  <!-- Vis tilbakeknapp hvist man ikke er på hjemmesiden -->
  <ion-buttons slot="start" *ngIf="!router.url.includes('/home')">
    <ion-back-button defaultHref="home"></ion-back-button>
  </ion-buttons>

  <!-- Vis bruker avatar, brukernavn og meny hvist bruker er logget inn -->
  <ion-item slot="end" *ngIf="loggedin">

    <!-- Proiflbilde -->
    <ion-avatar slot="start">
      <ion-img src="./assets/icon/defaultUserIcon.svg"></ion-img>
    </ion-avatar> 

    <!-- Brukernavn, åpner popover meny -->
    <ion-button (click)="openMenu($event)" fill="clear">
      <ion-label>{{username}}</ion-label>
    </ion-button>  
  </ion-item>

  <!-- Vis log in link hvist bruker ikke er logget inn -->
  <ion-item slot="end" *ngIf="!loggedin"> 
    <ion-button (click)="login()" fill="clear">
      <ion-label>Login</ion-label>
    </ion-button>  
  </ion-item>

</ion-toolbar>

w is computed 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();
  }
  
}

Source: Angular Questions