How to use ngx-device-detector - 10 common examples

import { DeviceDetectorModule } from 'ngx-device-detector';
 import { BootstrapFramework, WebExtensionModule } from '@project-sunbird/web-extensions';
 import { WebExtensionsConfig, PluginModules } from './framework.config.offline';
@NgModule({
  declarations: [
  ],
  imports: [
    CoreModule,
    CommonModule,
    BrowserModule,
    HttpClientModule,
    SuiModule,
    SharedModule.forRoot(),
    WebExtensionModule.forRoot(),
    TelemetryModule.forRoot(),
    DeviceDetectorModule.forRoot(),
    SharedFeatureModule,
    PluginModules,
    AppRoutingOfflineModule // don't add any module below this because it contains wildcard route
  ],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    CacheService,
    { provide: CacheStorageAbstract, useClass: CacheSessionStorage },
  ]
})
export class AppModuleOffline {
  constructor(bootstrapFramework: BootstrapFramework) {
    bootstrapFramework.initialize(WebExtensionsConfig);
  }
}

import { PluginModules } from './framework.config';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserAnimationsModule, // used this instaed of browser module since it includes in it.
    CoreModule,
    CommonModule,
    HttpClientModule,
    SuiSelectModule, SuiModalModule, SuiAccordionModule, SuiPopupModule, SuiDropdownModule, SuiProgressModule,
    SuiRatingModule, SuiCollapseModule,
    SharedModule.forRoot(),
    WebExtensionModule.forRoot(),
    TelemetryModule.forRoot(),
    DeviceDetectorModule.forRoot(),
    SharedFeatureModule,
    ...PluginModules,
    AppRoutingModule // don't add any module below this because it contains wildcard route
  ],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    CacheService,
    { provide: CacheStorageAbstract, useClass: CacheSessionStorage },
    // { provide: HTTP_INTERCEPTORS, useClass: SessionExpiryInterceptor, multi: true }
  ]
})
export class AppModule {
  constructor(bootstrapFramework: BootstrapFramework) {
    bootstrapFramework.initialize(WebExtensionsConfig);
  }

private fixDefaultMapZoomRate() {
    // zoom is by default very slow in Blink-based browsers (Chrome, Opera, etc.) on Linux
    if (this.deviceDetectorService.os === OS.LINUX && this.platform.BLINK) {
      (this.mapboxMap.scrollZoom as any).setWheelZoomRate(1 / 200);
    }
  }

})
class AppComponent {
  propsToShow = ["userAgent", "os", "browser", "device", "os_version", "browser_version"];
  device: DeviceInfo = null;
  constructor(private deviceService: DeviceDetectorService){
    this.device = deviceService.getDeviceInfo();
    console.log(this.device);
    console.log('isMobile', this.deviceService.isMobile());
    console.log('isTablet', this.deviceService.isTablet());
  }
}

@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [ AppComponent, KeysPipe ],
  imports: [ BrowserModule, DeviceDetectorModule.forRoot() ]
})
class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

function AppComponent(deviceService) {
        this.deviceService = deviceService;
        this.propsToShow = ["userAgent", "os", "browser", "device", "os_version", "browser_version"];
        this.device = null;
        this.device = deviceService.getDeviceInfo();
        console.log(this.device);
        console.log('isMobile', this.deviceService.isMobile());
        console.log('isTablet', this.deviceService.isTablet());
    }
    var _a;
    AppComponent = __decorate([
        core_2.Component({
            selector: 'app',
            template: "\n  <div class="\&quot;container\&quot;" id="\&quot;demoApp\&quot;">\n    <div class="\&quot;demo-container\&quot;">\n      <div class="\&quot;demo-heading\&quot;">\n        <h2 class="\&quot;text-center">\n          ngx-device-detector demo\n        </h2>\n        <p class="\&quot;text-center\&quot;">\n          Open this page from different devices to see the appropriate details\n        </p>\n        <h4 class="\&quot;text-center\&quot;">Device Information</h4>\n      </div>\n      <div class="\&quot;information-table\&quot;">\n        \n          \n            \n            \n          \n          \n            \n            \n          \n        <table class="\&quot;table"><tbody><tr><th>Property</th><th>Value</th></tr><tr class="\&quot;info-item"><td>{{info.key}}</td><td>{{info.value}}</td></tr></tbody></table>\n      </div>\n    </div>\n  </div>\n"
        }),
        __metadata("design:paramtypes", [typeof (_a = typeof ngx_device_detector_1.DeviceDetectorService !== "undefined" &amp;&amp; ngx_device_detector_1.DeviceDetectorService) === "function" ? _a : Object])
    ], AppComponent);
    return AppComponent;
}());
var AppModule = /** @class */ (function () {

FormsModule,
    HttpClientModule,
    RouterModule,
    SharedModule,
    ClickOutsideModule,
    GuardsModule,
    BrowserAnimationsModule,
    NotificationsModule,
    AlertModule.forRoot(),
    BsDatepickerModule.forRoot(),
    BsDropdownModule.forRoot(),
    PopoverModule.forRoot(),
    ModalModule.forRoot(),
    TimepickerModule.forRoot(),
    TypeaheadModule.forRoot(),
    DeviceDetectorModule.forRoot(),
  ],
  declarations: [HomeComponent, RedirectComponent],
  providers: [
    {
      provide: ErrorHandler,
      useClass: SentryErrorHandler,
    },
    httpInterceptorProviders,
    CollectionService,
    DocumentService,
    OrganizationService,
    ProjectService,
    SearchService,
    BaseService,
    ImportService,
    UserService,

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        DeviceDetectorModule.forRoot()
      ],
      declarations: [
        AppComponent,
        KeysPipe
      ],
      providers: []
    }).compileComponents();
  }));

AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    CdkTableModule,
    CartographyModule,
    HotkeyModule.forRoot(),
    PersistenceModule,
    NgxElectronModule,
    FileUploadModule,
    MatSidenavModule,
    ResizableModule,
    DragAndDropModule,
    DragDropModule,
    MATERIAL_IMPORTS,
    DeviceDetectorModule.forRoot()
  ],
  providers: [
    SettingsService,
    { provide: ErrorHandler, useClass: ToasterErrorHandler },
    D3Service,
    VersionService,
    ProjectService,
    SymbolService,
    ServerService,
    TemplateService,
    NodeService,
    LinkService,
    DrawingService,
    IndexedDbService,
    HttpServer,
    SnapshotService,

import { CoreModule } from './modules/core/core.module';
import { SharedModule } from './modules/shared/shared.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CoreModule,
    SharedModule,
    AppRoutingModule,
    LoadingBarHttpClientModule,
    LoadingBarRouterModule,
    DeviceDetectorModule.forRoot(),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { KeysPipe } from './pipes/keys.pipe';
import { CommonModule } from '@angular/common';
import { DeviceDetectorModule } from 'ngx-device-detector';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    KeysPipe
  ],
  imports: [
    NoopAnimationsModule,
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    CommonModule,
    DeviceDetectorModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }