Как показать разные компоненты в зависимости от устройства (веб или мобильный)?

Question

В моем веб-приложении Angular 7, использующем TypeScript, bootstrap, ngx-bootstrap и т. Д., Как переключаться между компонентами в зависимости от того, на каком устройстве находится пользователь (рабочий стол или мобильный)?

Я вижу много сайтов, на которых при изменении размера отображаются разные компоненты! Я не уверен, что это одни и те же адаптивные компоненты с большим количеством необычных CSS, но в некоторых случаях кажется, что это совершенно разные компоненты.

Ex. Рабочий стол YouTube против мобильного (не нативного)

Answer 1

Вы можете установить ngx-устройство-детектор и определить используемое устройство:

import { DeviceDetectorService } from 'ngx-device-detector';

this.deviceInfo = this.deviceService.getDeviceInfo();
const isMobile = this.deviceService.isMobile();
const isTablet = this.deviceService.isTablet();
const isDesktopDevice = this.deviceService.isDesktop();