How to hide / show < div > tags dependent on screen size?

#1

as a title:

I want to ask is there any way to hide / show < div > tags dependent on screen size ?

I checked so many ways but nothing work :frowning:

#2

.ts file

screenSize:any = {
  width: 0,
  height: 0
}

constructor(private platform:Platform) {
  this.platform.ready(() => {
    this.screenSize.width = this.platform.width();
    this.screenSize.height = this.platform.height(); 
  });
}

.html file

<div *ngIf="screenSize.width > 720">screen width > 720</div>

<div *ngIf="screenSize.height > 640">screen height > 640</div>
1 Like
#3

I would advise to not solve that as @avishai_peretz_dev displayed

Instead use css media queries https://www.w3schools.com/css/css3_mediaqueries_ex.asp

1 Like