Making Angular project responsive using query listeners

Question

Im looking for suggestions on how to make my angular project automatically detect and configure responsiveness.

Currently we are using a sort of matchmedia with queries such as "isMobile" etc. The project is responsive but doesnt detect a change in the responsiveness or size of the page automatically.

We want it to automatically detect a change in size that measures desktop, tablet or mobile and automatically update the responsiveness of the page to these configurations without needing to reload the page manually.

Any ideas or suggestions are welcome and please keep them coming cause this is a big project, thanks.

Example of a code piece we have in the project for this is down below.

    this.mobileQuery = media.matchMedia(`(max-width: ${MEDIA_BREAK_POINT}px)`);
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
    this.isMobile = this.service.isMobile;
    this.isTablet = this.service.isTablet;
    this.isDesktop = this.service.isDesktop;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

Answer 1

Yes of course:

enum DeviceSize='Mobile' | 'Tablet' | 'Desktop';
deviceSize$=new BehaviorSubject<DeviceSize>(DeviceSize.Desktop);
contructor(){
  this.initializeDeviceSize();
  fromEvent(window, 'resize')
      .pipe(
        startWith(null),
        debounceTime(1000),
      )
      .subscribe((c) => {
        this.onDeviceSizeChanged();
      });
}
initializeDeviceSize(){
 this.setDeviceSize();
}
onDeviceSizeChanged(){
 this.setDeviceSize();
}
setDeviceSize(){
 //check device size is which one of DeviceSize Enum
 if(isMobile){
   this.deviceSize$.next(DeviceSize.Mobile);
 }
 else if(isTablet)
 {
   this.deviceSizse$.next(DeviceSize.Tablet);
 }
 else {
   this.deviceSize$.next(DeviceSize.Desktop)
 }

}