detect if the browser is mobile without page reload

Question

I'm trying to figure out how I can close the sidebar when you click Click Me if my flexbox layout is mobile. I can get the sidebar to close if I refresh the browser in mobile mode via isMobile that already knows it's mobile, but I want it to close also if the user has a browser and shrinks the width to mobile view. the npmjs library isMobile doesn't know that it's mobile unless page reloads. I appreciate any help!

<mat-sidenav-container class="sidebar-container">


  <mat-sidenav [(opened)]="isOpen" #sidenav id="sideNav" mode="side" ngif="filtersVisible" opened>
    <div class="loading">


    </div>
    <div id="spacing1"></div>


    <mat-nav-list>
      <div id="topLinks">

      </div>

      <div class="loading">

        <ngx-spinner id="loadingIcon" *ngIf="isLoading" type="ball-spin-clockwise" size="medium" color="#3071a9">
        </ngx-spinner>

      </div>

      <a mat-list-item class="navList"><label routerLink="/store" (click)="closeSidebar()" onclick="return false;"
          class="menuOptions" routerLinkActive="active-list-item"><a href="#">Click Me</a></label></a>
      <hr>

      </label></a>
      <hr *ngIf="this.role === 'Admin'">

    </mat-nav-list>

  </mat-sidenav>



  <mat-sidenav-content>

    <div id="spacing"></div>
    <router-outlet>
    </router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

 closeSidebar() {
    if (this.mobile || this.tablet) {
      this.isOpen = false;
      this.store.dispatch({ type: "false" });
    }
  }

score 1 · Accepted Answer · answered Jul 20 '20 at 23:28

1

Try this: Service-

        import { Injectable } from '@angular/core';
        const SMALL_WIDTH_BREAKPOINT = 720;
        @Injectable({
         providedIn: 'root'
         })
    export class ScreenSizeService {
     private mediaMatcher: MediaQueryList =
      matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);

      constructor(  
      ) {}
     isScreenSmall(): boolean {
     return this.mediaMatcher.matches;
    }
  }

Use in component:

isScreenSmall: boolean;

@HostListener('window:resize') onresize() {
  this.isScreenSmall= this.service.isScreenSmall();
}
  constructor(private service: ScreenSizeService
  ) { }

answered Jul 20 '20 at 23:28

shshsi

106
3

That seems to work. I put a ```console.log(this.isScreenSmall)``` inside the HostListener and it's outputting true or false based on size of collapsed browser thanks. I've never used HostListener before. My question for you is if there is any kind of garbage collection needed or will it not affect performance? – Andy Jul 21 '20 at 12:52
Also how can I add another check inside the host listener. It seems that if I add another check for 1002 width, it ignores it and only checks the 720 width version. Can I get two different width checks inside host listener. Here's my current code: https://pastebin.com/8bwZN4L5 – Andy Jul 21 '20 at 15:03
In your code in service for both methods isScreenSmall() and isScreenTablet() you are returning this.mediaMatcher.matches, in isScreenTablet() you should return this.mediaMathcer2.matches – shshsi Jul 21 '20 at 17:26

score 0 · Answer 2 · answered Jul 20 '20 at 22:39

0

The mentioned isMobile library relies on the user agent string, so it basically should not need another pageload.

However, only mobile devices usually support the 'TouchEvent'. You can use this to check if it's proably a mobile device without relying on the User agent

    function isTouch() {
        try {
          document.createEvent('TouchEvent');
          return true;
        }
        catch (e) {
          return false;
        }
    }

answered Jul 20 '20 at 22:39

Marco 'Lubber' Wienkoop

85
6

How do you check if it's mobile from an angular component? Also it would have to be some sort of observable inside constructor solution I would think for what I have in mind to work. I don't think I can call a function in an efficient manner when the browser is resized, but maybe I'm wrong – Andy Jul 20 '20 at 22:57
You can detect resizing https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event For usage in angular this might help https://stackoverflow.com/a/35527852/6278591 – Marco 'Lubber' Wienkoop Jul 21 '20 at 07:01

detect if the browser is mobile without page reload

2 Answers2