refactor: move ColorModeService setup from default-header to app component

Author: xidedix

src/app/app.component.spec.ts

@@ -1,15 +1,15 @@
 import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
+import { provideRouter } from '@angular/router';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-    imports: [
-        RouterTestingModule,
+      imports: [
         AppComponent
-    ],
-}).compileComponents();
+      ],
+      providers: [provideRouter([])]
+    }).compileComponents();
   });
 
   it('should create the app', () => {

src/app/app.component.ts

@@ -1,7 +1,10 @@
-import { Component, OnInit } from '@angular/core';
-import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
+import { Component, DestroyRef, inject, OnInit } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Title } from '@angular/platform-browser';
+import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from '@angular/router';
+import { delay, filter, map, tap } from 'rxjs/operators';
 
+import { ColorModeService } from '@coreui/angular';
 import { IconSetService } from '@coreui/icons-angular';
 import { iconSubset } from './icons/icon-subset';
 
@@ -14,21 +17,42 @@ import { iconSubset } from './icons/icon-subset';
 export class AppComponent implements OnInit {
   title = 'CoreUI Angular Admin Template';
 
-  constructor(
-    private router: Router,
-    private titleService: Title,
-    private iconSetService: IconSetService
-  ) {
-    this.titleService.setTitle(this.title);
+  readonly #destroyRef: DestroyRef = inject(DestroyRef);
+  readonly #activatedRoute: ActivatedRoute = inject(ActivatedRoute);
+  readonly #router = inject(Router);
+  readonly #titleService = inject(Title);
+
+  readonly #colorModeService = inject(ColorModeService);
+  readonly #iconSetService = inject(IconSetService);
+
+  constructor() {
+    this.#titleService.setTitle(this.title);
     // iconSet singleton
-    this.iconSetService.icons = { ...iconSubset };
+    this.#iconSetService.icons = { ...iconSubset };
+    this.#colorModeService.localStorageItemName.set('coreui-free-angular-admin-template-theme-default');
+    this.#colorModeService.eventName.set('ColorSchemeChange');
   }
 
   ngOnInit(): void {
-    this.router.events.subscribe((evt) => {
+
+    this.#router.events.pipe(
+        takeUntilDestroyed(this.#destroyRef)
+      ).subscribe((evt) => {
       if (!(evt instanceof NavigationEnd)) {
         return;
       }
     });
+
+    this.#activatedRoute.queryParams
+      .pipe(
+        delay(1),
+        map(params => <string>params['theme']?.match(/^[A-Za-z0-9\s]+/)?.[0]),
+        filter(theme => ['dark', 'light', 'auto'].includes(theme)),
+        tap(theme => {
+          this.#colorModeService.colorMode.set(theme);
+        }),
+        takeUntilDestroyed(this.#destroyRef)
+      )
+      .subscribe();
   }
 }

src/app/layout/default-layout/default-header/default-header.component.html

@@ -2,7 +2,7 @@
 <ng-container>
   <c-container [fluid]="true" class="border-bottom px-4">
     <button
-      [cSidebarToggle]="sidebarId"
+      [cSidebarToggle]="sidebarId()"
       cHeaderToggler
       class="btn"
       toggle="visible"
@@ -169,7 +169,6 @@ <h6 cDropdownHeader class="bg-body-secondary text-body-secondary fw-semibold py-
         <button
           (click)="colorMode.set(mode.name)"
           [active]="colorMode()===mode.name"
-          [routerLink]="[]"
           cDropdownItem
           class="d-flex align-items-center"
         >

src/app/layout/default-layout/default-header/default-header.component.ts

@@ -1,4 +1,7 @@
-import { Component, computed, DestroyRef, inject, Input } from '@angular/core';
+import { NgStyle, NgTemplateOutlet } from '@angular/common';
+import { Component, computed, inject, input } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
 import {
   AvatarComponent,
   BadgeComponent,
@@ -22,11 +25,8 @@ import {
   TextColorDirective,
   ThemeDirective
 } from '@coreui/angular';
-import { NgStyle, NgTemplateOutlet } from '@angular/common';
-import { ActivatedRoute, RouterLink, RouterLinkActive } from '@angular/router';
+
 import { IconDirective } from '@coreui/icons-angular';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { delay, filter, map, tap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-default-header',
@@ -36,10 +36,8 @@ import { delay, filter, map, tap } from 'rxjs/operators';
 })
 export class DefaultHeaderComponent extends HeaderComponent {
 
-  readonly #activatedRoute: ActivatedRoute = inject(ActivatedRoute);
   readonly #colorModeService = inject(ColorModeService);
   readonly colorMode = this.#colorModeService.colorMode;
-  readonly #destroyRef: DestroyRef = inject(DestroyRef);
 
   readonly colorModes = [
     { name: 'light', text: 'Light', icon: 'cilSun' },
@@ -49,28 +47,14 @@ export class DefaultHeaderComponent extends HeaderComponent {
 
   readonly icons = computed(() => {
     const currentMode = this.colorMode();
-    return this.colorModes.find(mode=> mode.name === currentMode)?.icon ?? 'cilSun';
+    return this.colorModes.find(mode => mode.name === currentMode)?.icon ?? 'cilSun';
   });
 
   constructor() {
     super();
-    this.#colorModeService.localStorageItemName.set('coreui-free-angular-admin-template-theme-default');
-    this.#colorModeService.eventName.set('ColorSchemeChange');
-
-    this.#activatedRoute.queryParams
-      .pipe(
-        delay(1),
-        map(params => <string>params['theme']?.match(/^[A-Za-z0-9\s]+/)?.[0]),
-        filter(theme => ['dark', 'light', 'auto'].includes(theme)),
-        tap(theme => {
-          this.colorMode.set(theme);
-        }),
-        takeUntilDestroyed(this.#destroyRef)
-      )
-      .subscribe();
   }
 
-  @Input() sidebarId: string = 'sidebar1';
+  sidebarId = input('sidebar1');
 
   public newMessages = [
     {