Apr 27, 2021 in Ionic, Angular

A toolbox like Ionic makes our life as a developer a little bit more easy. This post guides you in how to get the window size dynamically in your components and to set a variable column width depending on it.

I have a eventcard.component.ts file, in which I use the Ionic platform module. With a HostListener I get the value in real-time.  

import { Component, OnInit } from '@angular/core';
import {Platform} from "@ionic/angular";
import {HostListener} from "@angular/core";

@Component({
  selector: 'app-eventcard',
  templateUrl: './eventcard.component.html',
})
export class EventcardComponent implements OnInit {
  constructor(private platform: Platform){
    platform.ready().then(() => {
      this.PlatformWidth = platform.width();
    });
  }

  public PlatformWidth = this.platform.width();

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.PlatformWidth = this.platform.width();
  }

  ngOnInit() {}

}

After this, in my eventcard.component.html I can set my ion-col width dynamically:

<ion-col [attr.size]="(PlatformWidth > 768) ? 4 : 12">Full width on mobile, 1/3 width on desktop</ion-col>

You can do exactly the same with classes:

<div [ngClass]="{'k-p-10' : PlatformWidth > 768}">