Merge pull request #15238 from IgniteUI/rivanova/fix-15020-19.0.x

fix(carousel): inject interface in slide ctor
IgniteUI · Jan 16, 2025 · b78458c · b78458c
2 parents dcc1040 + ca13ff1
commit b78458c
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 8 deletions.
diff --git a/projects/igniteui-angular/src/lib/carousel/carousel-base.ts b/projects/igniteui-angular/src/lib/carousel/carousel-base.ts
@@ -1,9 +1,9 @@
 import { AnimationReferenceMetadata, useAnimation } from '@angular/animations';
-import { ChangeDetectorRef, EventEmitter, Inject } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, Inject, InjectionToken } from '@angular/core';
 import { IgxAngularAnimationService } from '../services/animation/angular-animation-service';
 import { AnimationPlayer, AnimationService } from '../services/animation/animation';
 import { fadeIn, slideInLeft } from 'igniteui-angular/animations';
-import { CarouselAnimationType } from './enums';
+import { CarouselAnimationType, CarouselIndicatorsOrientation } from './enums';
 
 export enum Direction { NONE, NEXT, PREV }
 
@@ -12,6 +12,37 @@ export interface CarouselAnimationSettings {
     leaveAnimation: AnimationReferenceMetadata;
 }
 
+export interface ICarouselComponentBase {
+    id: string;
+    role: string;
+    cssClass: string;
+    loop: boolean;
+    pause: boolean;
+    navigation: boolean;
+    indicators: boolean;
+    vertical: boolean;
+    keyboardSupport: boolean;
+    gesturesSupport: boolean;
+    maximumIndicatorsCount: number;
+    indicatorsOrientation: CarouselIndicatorsOrientation;
+    animationType: CarouselAnimationType;
+    total: number;
+    current: number;
+    interval: number;
+    slideChanged: EventEmitter<any>;
+    slideAdded: EventEmitter<any>;
+    slideRemoved: EventEmitter<any>;
+    carouselPaused: EventEmitter<any>;
+    carouselPlaying: EventEmitter<any>;
+    next(): void;
+    prev(): void;
+    play(): void;
+    stop(): void
+}
+
+/** @hidden */
+export const IGX_CAROUSEL_COMPONENT = /*@__PURE__*/new InjectionToken<ICarouselComponentBase>('IgxCarouselToken');
+
 /** @hidden */
 export interface IgxSlideComponentBase {
     direction: Direction;

diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts
@@ -30,7 +30,7 @@ import { CarouselResourceStringsEN, ICarouselResourceStrings } from '../core/i18
 import { first, IBaseEventArgs, last, PlatformUtil } from '../core/utils';
 import { IgxAngularAnimationService } from '../services/animation/angular-animation-service';
 import { AnimationService } from '../services/animation/animation';
-import { Direction, IgxCarouselComponentBase } from './carousel-base';
+import { Direction, ICarouselComponentBase, IGX_CAROUSEL_COMPONENT, IgxCarouselComponentBase } from './carousel-base';
 import { IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective } from './carousel.directives';
 import { IgxSlideComponent } from './slide.component';
 import { IgxIconComponent } from '../icon/icon.component';
@@ -75,7 +75,8 @@ export class CarouselHammerConfig extends HammerGestureConfig {
         {
             provide: HAMMER_GESTURE_CONFIG,
             useClass: CarouselHammerConfig
-        }
+        },
+        { provide: IGX_CAROUSEL_COMPONENT, useExisting: IgxCarouselComponent }
     ],
     selector: 'igx-carousel',
     templateUrl: 'carousel.component.html',
@@ -87,7 +88,7 @@ export class CarouselHammerConfig extends HammerGestureConfig {
     imports: [IgxButtonDirective, IgxIconComponent, NgIf, NgClass, NgFor, NgTemplateOutlet]
 })
 
-export class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterContentInit {
+export class IgxCarouselComponent extends IgxCarouselComponentBase implements ICarouselComponentBase, OnDestroy, AfterContentInit {
 
     /**
      * Sets the `id` of the carousel.

diff --git a/projects/igniteui-angular/src/lib/carousel/slide.component.ts b/projects/igniteui-angular/src/lib/carousel/slide.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnDestroy, Input, HostBinding, Output, EventEmitter, ElementRef, AfterContentChecked, booleanAttribute, Inject } from '@angular/core';
 import { Subject } from 'rxjs';
-import { Direction, IgxSlideComponentBase } from './carousel-base';
-import { IgxCarouselComponent } from './carousel.component';
+import { Direction, ICarouselComponentBase, IGX_CAROUSEL_COMPONENT, IgxSlideComponentBase } from './carousel-base';
 
 /**
  * A slide component that usually holds an image and/or a caption text.
@@ -132,7 +131,7 @@ export class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSli
 
     constructor(
         private elementRef: ElementRef,
-        @Inject(IgxCarouselComponent) private carousel: IgxCarouselComponent
+        @Inject(IGX_CAROUSEL_COMPONENT) private carousel: ICarouselComponentBase,
     ) { }
 
     /**