refactor(carousel): carousel.config migrate to inject()

xidedix · xidedix · commit ce2b85362b87 · 2025-06-12T18:31:48.000+02:00
diff --git a/projects/coreui-angular/src/lib/carousel/carousel.config.ts b/projects/coreui-angular/src/lib/carousel/carousel.config.ts
@@ -9,5 +9,5 @@ export class CarouselConfig {
   /* Default direction of auto changing of slides */
   direction: 'next' | 'prev' = 'next';
   /* Default interval of auto changing of slides */
-  interval = 0;
+  interval?: number;
 }
diff --git a/projects/coreui-angular/src/lib/carousel/carousel/carousel.component.spec.ts b/projects/coreui-angular/src/lib/carousel/carousel/carousel.component.spec.ts
@@ -41,7 +41,7 @@ describe('CarouselComponent', () => {
     expect(component.activeIndex()).toBe(0);
     expect(component.animate()).toBe(true);
     expect(component.direction()).toBe('next');
-    expect(component.interval()).toBe(0);
+    expect(component.interval()).toBe(-1);
   });
 
   it('should call timer functions', fakeAsync(() => {
diff --git a/projects/coreui-angular/src/lib/carousel/carousel/carousel.component.ts b/projects/coreui-angular/src/lib/carousel/carousel/carousel.component.ts
@@ -4,10 +4,10 @@ import {
   DestroyRef,
   effect,
   ElementRef,
-  Inject,
   inject,
   input,
   linkedSignal,
+  numberAttribute,
   OnDestroy,
   OnInit,
   output
@@ -37,28 +37,30 @@ import { CarouselConfig } from '../carousel.config';
   }
 })
 export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
+  private config = inject<CarouselConfig>(CarouselConfig);
+
   readonly #hostElement = inject(ElementRef);
   readonly #carouselService = inject(CarouselService);
   readonly #carouselState = inject(CarouselState);
   readonly #intersectionService = inject(IntersectionService);
   readonly #listenersService = inject(ListenersService);
 
-  constructor(@Inject(CarouselConfig) private config: CarouselConfig) {
+  constructor() {
     this.loadConfig();
   }
 
   loadConfig() {
-    this.activeIndex.set(this.config?.activeIndex ?? this.activeIndex());
-    this.animate.set(this.config?.animate ?? this.animate());
-    this.direction.set(this.config?.direction ?? this.direction());
-    this.interval.set(this.config?.interval ?? this.interval());
+    this.activeIndex.update((activeIndex) => this.config?.activeIndex ?? activeIndex);
+    this.animate.update((animate) => this.config?.animate ?? animate);
+    this.direction.update((direction) => this.config?.direction ?? direction);
+    this.interval.update((interval) => this.config?.interval ?? interval);
   }
 
   /**
    * Index of the active item.
    * @return number
    */
-  readonly activeIndexInput = input<number>(0, { alias: 'activeIndex' });
+  readonly activeIndexInput = input(0, { alias: 'activeIndex', transform: numberAttribute });
 
   readonly activeIndex = linkedSignal({
     source: this.activeIndexInput,
@@ -92,7 +94,7 @@ export class CarouselComponent implements OnInit, OnDestroy, AfterContentInit {
    * @return number
    * @default 0
    */
-  readonly intervalInput = input<number>(0, { alias: 'interval' });
+  readonly intervalInput = input(-1, { alias: 'interval', transform: numberAttribute });
 
   readonly interval = linkedSignal({
     source: this.intervalInput,

Original file line number	Diff line number	Diff line change
`@@ -9,5 +9,5 @@ export class CarouselConfig {`
`9`	`9`	`/* Default direction of auto changing of slides */`
`10`	`10`	`direction: 'next' \| 'prev' = 'next';`
`11`	`11`	`/* Default interval of auto changing of slides */`
`12`		`- interval = 0;`
	`12`	`+ interval?: number;`
`13`	`13`	`}`