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}">