import browser from 'browser-detect' ; import { Component , OnInit , OnDestroy } from '@angular/core' ; import { Observable } from 'rxjs' ; import { SubSink } from 'subsink' ; import { Store , Select } from '@ngxs/store' ; import { Navigate } from '@ngxs/router-plugin' ; import { environment as env } from '@env' ; import { AppInsightsService } from '@markpieszak/ng-application-insights' ; import { SettingsState , SettingsStateModel } from './core/states/settings.state' ; import { SidenavService } from './core/services/sidenav.service' ; import { ChangeThemeAction } from './core/actions/settings.action' ; import { IconService } from './core/services/icon.service' ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.scss' ] } ) export class AppComponent implements OnInit , OnDestroy { isProd = env . production ; year = new Date ( ) . getFullYear ( ) ; languages = [ 'en' , 'no' ] ; navigation = [ { link : 'about' , label : 'About' } , ] ; navigationSideMenu = [ ... this . navigation , { link : 'settings' , label : 'Settings' } ] ; isAuthenticated$ : Observable < boolean > ; theme$ : Observable < SettingsStateModel > = this . store . select < SettingsStateModel > ( state => state . settings . selectedTheme ) ; @ Select ( SettingsState . getEffectiveTheme ) selectedTheme$ : Observable < string > ; private subs = new SubSink ( ) ; title = 'angular-material-starter' ; constructor ( private appInsight , private sidenavService , private store , private iconService ) { } private static isIEorEdgeOrSafari ( ) { return [ 'ie' , 'edge' , 'safari' ] . includes ( browser ( ) . name ) ; } ngOnInit ( ) { this . iconService . init ( ) ; this . selectedTheme$ . subscribe ( console . log ) ; this . store . dispatch ( new ChangeThemeAction ( 'app-dark-theme' ) ) ; } ngOnDestroy ( ) { this . subs . unsubscribe ( ) ; } }