refactor: update calls to afterRender with an explicit phase to the new API

Author: xidedix

CHANGELOG.md

@@ -5,6 +5,7 @@
 #### `5.2.5`
 
 - chore(dependencies): update to Angular 18.1
+- refactor: update calls to `afterRender` with an explicit phase to the new API
 
 ---
 

projects/coreui-angular-chartjs/src/lib/chartjs.component.ts

@@ -1,6 +1,5 @@
 import {
   afterRender,
-  AfterRenderPhase,
   AfterViewInit,
   booleanAttribute,
   ChangeDetectionStrategy,
@@ -41,7 +40,6 @@ let nextId = 0;
   // host: { ngSkipHydration: 'true' }
 })
 export class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
-
   /**
    * Enables custom html based tooltips instead of standard tooltips.
    * @type boolean
@@ -65,7 +63,8 @@ export class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
    * @default 150
    */
   @HostBinding('style.height.px')
-  @Input({ transform: (value: string | number) => numberAttribute(value, undefined) }) height?: number;
+  @Input({ transform: (value: string | number) => numberAttribute(value, undefined) })
+  height?: number;
 
   /**
    * ID attribute applied to the rendered canvas.
@@ -102,7 +101,8 @@ export class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
    * @default 300
    */
   @HostBinding('style.width.px')
-  @Input({ transform: (value: string | number) => numberAttribute(value, undefined) }) width?: number;
+  @Input({ transform: (value: string | number) => numberAttribute(value, undefined) })
+  width?: number;
 
   /**
    * Put the chart into the wrapper div element.
@@ -134,10 +134,12 @@ export class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
     private readonly changeDetectorRef: ChangeDetectorRef
   ) {
     // todo: verify afterRender / afterNextRender for chartjs (spec fails with 17.0.10)
-    afterRender(() => {
-      this.ctx = this.canvasElement?.nativeElement?.getContext('2d');
-      this.chartRender();
-    }, { phase: AfterRenderPhase.Write });
+    afterRender({
+      write: () => {
+        this.ctx = this.canvasElement?.nativeElement?.getContext('2d');
+        this.chartRender();
+      }
+    });
   }
 
   ngAfterViewInit(): void {
@@ -159,13 +161,28 @@ export class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
       return;
     }
 
-    const datasetAtEvent: InteractionItem[] = this.chart.getElementsAtEventForMode($event, 'dataset', { intersect: true }, false);
+    const datasetAtEvent: InteractionItem[] = this.chart.getElementsAtEventForMode(
+      $event,
+      'dataset',
+      { intersect: true },
+      false
+    );
     this.getDatasetAtEvent.emit(datasetAtEvent);
 
-    const elementAtEvent: InteractionItem[] = this.chart.getElementsAtEventForMode($event, 'nearest', { intersect: true }, false);
+    const elementAtEvent: InteractionItem[] = this.chart.getElementsAtEventForMode(
+      $event,
+      'nearest',
+      { intersect: true },
+      false
+    );
     this.getElementAtEvent.emit(elementAtEvent);
 
-    const elementsAtEvent: InteractionItem[] = this.chart.getElementsAtEventForMode($event, 'index', { intersect: true }, false);
+    const elementsAtEvent: InteractionItem[] = this.chart.getElementsAtEventForMode(
+      $event,
+      'index',
+      { intersect: true },
+      false
+    );
     this.getElementsAtEvent.emit(elementsAtEvent);
   }
 
@@ -278,5 +295,5 @@ export class ChartjsComponent implements AfterViewInit, OnDestroy, OnChanges {
         }
       });
     }
-  };
+  }
 }

projects/coreui-angular/src/lib/services/color-mode.service.ts

@@ -1,14 +1,5 @@
 import { DOCUMENT } from '@angular/common';
-import {
-  afterNextRender,
-  AfterRenderPhase,
-  DestroyRef,
-  effect,
-  inject,
-  Injectable,
-  signal,
-  WritableSignal
-} from '@angular/core';
+import { afterNextRender, DestroyRef, effect, inject, Injectable, signal, WritableSignal } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { tap } from 'rxjs/operators';
 import { LocalStorageService } from './local-storage.service';
@@ -19,7 +10,6 @@ export type ColorMode = 'light' | 'dark' | 'auto' | string | undefined;
   providedIn: 'root'
 })
 export class ColorModeService {
-
   readonly #destroyRef: DestroyRef = inject(DestroyRef);
   readonly #document: Document = inject(DOCUMENT);
   readonly #localStorage: LocalStorageService = inject(LocalStorageService);
@@ -39,16 +29,18 @@ export class ColorModeService {
   });
 
   constructor() {
-    afterNextRender(() => {
-      this.localStorageItemName$
-        .pipe(
-          tap(params => {
-            this.colorMode.set(this.getDefaultScheme(params));
-          }),
-          takeUntilDestroyed(this.#destroyRef)
-        )
-        .subscribe();
-    }, { phase: AfterRenderPhase.Read });
+    afterNextRender({
+      read: () => {
+        this.localStorageItemName$
+          .pipe(
+            tap((params) => {
+              this.colorMode.set(this.getDefaultScheme(params));
+            }),
+            takeUntilDestroyed(this.#destroyRef)
+          )
+          .subscribe();
+      }
+    });
   }
 
   getStoredTheme(localStorageItemName: string) {
@@ -71,23 +63,25 @@ export class ColorModeService {
     const storedTheme = localStorageItemName && this.getStoredTheme(localStorageItemName);
 
     return storedTheme ?? this.getDatasetTheme();
-  };
+  }
 
   getPrefersColorScheme() {
-    return this.#document.defaultView?.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' :
-           this.#document.defaultView?.matchMedia('(prefers-color-scheme: light)').matches ? 'light' :
-           undefined;
+    return this.#document.defaultView?.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : this.#document.defaultView?.matchMedia('(prefers-color-scheme: light)').matches
+        ? 'light'
+        : undefined;
   }
 
   getDatasetTheme(): ColorMode {
-    return <ColorMode>(this.#document.documentElement.dataset['coreuiTheme']);
+    return <ColorMode>this.#document.documentElement.dataset['coreuiTheme'];
   }
 
   #setTheme(colorMode: ColorMode) {
-    this.#document.documentElement.dataset['coreuiTheme'] = (colorMode === 'auto' ? this.getPrefersColorScheme() : colorMode);
+    this.#document.documentElement.dataset['coreuiTheme'] =
+      colorMode === 'auto' ? this.getPrefersColorScheme() : colorMode;
 
     const event = new Event(this.eventName());
     this.#document.documentElement.dispatchEvent(event);
-  };
-
+  }
 }

projects/coreui-icons-angular/src/lib/icon/icon.directive.ts

@@ -1,14 +1,4 @@
-import {
-  afterNextRender,
-  AfterRenderPhase,
-  computed,
-  Directive,
-  ElementRef,
-  HostBinding,
-  inject,
-  Input,
-  signal
-} from '@angular/core';
+import { afterNextRender, computed, Directive, ElementRef, HostBinding, inject, Input, signal } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
 import { IconSetService } from '../icon-set';
@@ -21,21 +11,22 @@ import { transformName } from './icon.utils';
   standalone: true
 })
 export class IconDirective implements IIcon {
-
   readonly #elementRef = inject(ElementRef);
   readonly #sanitizer = inject(DomSanitizer);
   readonly #iconSet = inject(IconSetService);
 
   constructor() {
-    afterNextRender(() => {
-      this.#elementRef.nativeElement.innerHTML = this.innerHtml();
-    }, { phase: AfterRenderPhase.Write });
+    afterNextRender({
+      write: () => {
+        this.#elementRef.nativeElement.innerHTML = this.innerHtml();
+      }
+    });
   }
 
   @Input('cIcon')
   set content(value: string | string[] | any[]) {
     this.#content.set(value);
-  };
+  }
 
   readonly #content = signal<string | string[] | any[]>('');
 
@@ -48,7 +39,7 @@ export class IconDirective implements IIcon {
   @Input({ transform: transformName })
   set name(value: string) {
     this.#name.set(value);
-  };
+  }
 
   get name() {
     return this.#name();
@@ -71,13 +62,16 @@ export class IconDirective implements IIcon {
   @HostBinding('attr.aria-hidden') ariaHidden = true;
 
   @HostBinding('attr.xmlns')
-  @Input() xmlns = 'http://www.w3.org/2000/svg';
+  @Input()
+  xmlns = 'http://www.w3.org/2000/svg';
 
   @HostBinding('attr.pointer-events')
-  @Input('pointer-events') pointerEvents = 'none';
+  @Input('pointer-events')
+  pointerEvents = 'none';
 
   @HostBinding('attr.role')
-  @Input() role = 'img';
+  @Input()
+  role = 'img';
 
   @HostBinding('class')
   get hostClasses() {
@@ -90,10 +84,10 @@ export class IconDirective implements IIcon {
   }
 
   readonly innerHtml = computed(() => {
-    const code = Array.isArray(this.code()) ? (this.code()[1] ?? this.code()[0] ?? '') : this.code() || '';
+    const code = Array.isArray(this.code()) ? this.code()[1] ?? this.code()[0] ?? '' : this.code() || '';
     // todo proper sanitize
     // const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, code);
-    return this.#sanitizer.bypassSecurityTrustHtml((this.titleCode + code) || '');
+    return this.#sanitizer.bypassSecurityTrustHtml(this.titleCode + code || '');
   });
 
   get titleCode(): string {
@@ -108,8 +102,9 @@ export class IconDirective implements IIcon {
       return this.#iconSet.getIcon(this.#name());
     }
     if (this.#name() && !this.#iconSet?.icons[this.#name()]) {
-      console.warn(`c-icon component: icon name '${this.#name()}' does not exist for IconSet service. ` +
-        `To use icon by 'name' prop you need to add it to IconSet service. \n`,
+      console.warn(
+        `c-icon component: icon name '${this.#name()}' does not exist for IconSet service. ` +
+          `To use icon by 'name' prop you need to add it to IconSet service. \n`,
         this.#name()
       );
     }
@@ -132,5 +127,4 @@ export class IconDirective implements IIcon {
     };
     return this.customClasses ?? classes;
   }
-
 }