-3

Is there a way to check screen resolution on an angular website? I have a scenario where an application I'm working on has been designed using DevExtreme default components. This makes it difficult to customize.

In my case I'm dealing with a popup that's a form. It isn't displaying properly on 1920x1080. I.E. portions of it aren't showing.

I'm extremely NEW to Angular

OGC0der
  • 1
  • 4
  • What would define the popup displaying correctly? Are you able to post a https://stackoverflow.com/help/minimal-reproducible-example So we can see what you are currently working with! – Dylan Anlezark Apr 12 '21 at 03:30
  • I don't have a way to post an example. Just imagine a form that's a popup displaying improperly due to screen resolution changes. Does that help at all Dylan? – OGC0der Apr 14 '21 at 01:59
  • Sorry no my imagination isn't that great, I like to work off the facts and examples so i don't waste my time coming up with a solution to something that woudn't solve your problem. – Dylan Anlezark Apr 14 '21 at 22:07
  • Dylan, no worries. I will see if I can get an example. – OGC0der Apr 16 '21 at 05:19

4 Answers4

1

you can check the browser windows using media query check this

Nederxus
  • 65
  • 1
  • 5
  • Wait. Are you suggesting to do it straight through just CSS? – OGC0der Apr 14 '21 at 01:33
  • Yes , that is media query – Nederxus Apr 14 '21 at 01:59
  • I actually read about this today, but I'm quite stumped on how to use it. Thank you for replying. I appreciate it. – OGC0der Apr 14 '21 at 02:01
  • @OGC0der - don't be discouraged; it is very advanced stuff. Your code shouldn't explicitly check for browser size. **Definitely not** Angular code. You should use libraries like Bootstrap that will take care of adjusting controls for you. – Felix Apr 14 '21 at 06:03
  • Felix, I had found a reference to using bootstrap, but wasn't sure if that was overkill if you know what I mean. See here: https://www.digitalocean.com/community/tutorials/detect-responsive-screen-sizes-in-angular – OGC0der Apr 16 '21 at 05:17
0

You can use window.innerHeight or window.innerWidth. Probably you will need a resize method for the screen resize too.

Update:

HTML:

<div (window:resize)="onResize($event)">

TS:

   onResize(e){
     //SET SIZE OF THE GRID (calculated)

    var screenHeight= window.innerHeight;
    this.gritContentHeight= screenHeight-150;
   }
agrauang
  • 16
  • 3
  • Ades, I see. How does that work with a DevExtreme form component though? – OGC0der Apr 16 '21 at 05:15
  • You have the same problem as me in the past! Probably your datagrid not resize or only resize width... You can create a method on resize in a div to detect the event and then bind height and width of the datagrid to a TS var. – agrauang Apr 16 '21 at 06:16
  • Ades, that sounds great. However, I have no clue how to do what you just explained based off your experience using angular. – OGC0der Apr 17 '21 at 17:27
  • Ades, Awesome. I'll test it out soon and let you know if it works or gets me moving forward. – OGC0der Apr 21 '21 at 20:15
0

In general the best bet is using media-querys and display:none. But you can also create a simple service:

import { Injectable } from '@angular/core';
import {fromEvent} from 'rxjs'
import {map,debounceTime,distinctUntilChanged,startWith,tap} from 'rxjs/operators'

@Injectable({
  providedIn: 'root',
})
export class CommonService {
  resize$=fromEvent(window,'resize').pipe(
      startWith(null),
      debounceTime(100),
      map(_=>{
       if ((window.innerWidth)<576)
        return 'xs'
       if ((window.innerWidth)<768)
        return 'sm'
       if ((window.innerWidth)<992)
        return 'md'
       if ((window.innerWidth)<1200)
        return 'lg'
       if ((window.innerWidth)<1400)
        return 'xl'
       return 'xxl'
    }),
    distinctUntilChanged(),
    map(x=>({size:x,width:window.innerWidth})),
    tap(res=>console.log(res))
    )
  constructor() { }
}

You can use in a component that inject the service as public and use, e.g.

<ng-container *ngIf="{size:commonService.resize$|async} as size">
  <div *ngIf="size.size?.size=='sm'">I'm sm</div>
  <div *ngIf="size.size?.size=='xs'">I'm xs</div>
  <div *ngIf="size.size?.width>500">I'm greater than 500</div>
</ng-container>
Eliseo
  • 50,109
  • 4
  • 29
  • 67
0

You can use Angular cdk:

Sometimes we need to know the width of the browser window in our component’s class file. You could have a @HostListener in a component for the window's resize event, but you'd have to maintain the service, write tests to make sure it was working properly, handle observables correctly so there aren't memory leaks, etc. The Angular CDK's LayoutModule has a BreakpointObserver class that you can inject into a component, provide a breakpoint (or breakpoints) that you want to watch for, and it will emit each time you cross the threshold of a breakpoint (i.e. if I want to know when the screen is smaller than 700px, it will emit a value when I cross under 700px, and then again when I cross back over 700px).

import { Output, Injectable, EventEmitter } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

@Injectable({
  providedIn: 'root',
})
export class ScreenService {
  @Output() changed = new EventEmitter();

  constructor(private breakpointObserver: BreakpointObserver) {
    this.breakpointObserver
      .observe([Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large])
      .subscribe(() => this.changed.next());
  }

  private isLargeScreen() {
    const isLarge = this.breakpointObserver.isMatched(Breakpoints.Large);
    const isXLarge = this.breakpointObserver.isMatched(Breakpoints.XLarge);

    return isLarge || isXLarge;
  }

  public get sizes() {
    return {
      'screen-x-small': this.breakpointObserver.isMatched(Breakpoints.XSmall),
      'screen-small': this.breakpointObserver.isMatched(Breakpoints.Small),
      'screen-medium': this.breakpointObserver.isMatched(Breakpoints.Medium),
      'screen-large': this.isLargeScreen(),
    };
  }
}

And use it to detect screen size to open/close menu for example:

this.isMenuOpened = this.screen.sizes['screen-large'];

Also detect screen size changes:

this.screen.changed.subscribe(() => this.updateForm());

Better Explanation is here

Stackblitz Example is here

GitHub Repo is here

Masoud Bimmar
  • 6,941
  • 4
  • 30
  • 33