Estoy buscando sugerencias sobre cómo hacer que mi proyecto angular detecte y configure automáticamente la capacidad de respuesta.
Actualmente estamos usando una especie de matchmedia con consultas como "isMobile", etc. El proyecto responde pero no detecta automáticamente un cambio en la capacidad de respuesta o el tamaño de la página.
Queremos que detecte automáticamente un cambio de tamaño que mida el escritorio, la tableta o el móvil y actualice automáticamente la capacidad de respuesta de la página a estas configuraciones sin necesidad de recargar la página manualmente.
Todas las ideas o sugerencias son bienvenidas y por favor sigan viniendo porque este es un gran proyecto, gracias.
A continuación se muestra un ejemplo de una pieza de código que tenemos en el proyecto para esto.
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>Sí, por supuesto:
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) } }