Referencia de la API de Angular

Referencia completa de los componentes, las directivas, los servicios y las utilidades de @reelkit/angular.

ReelComponent

Selector: rk-reel

Inputs

InputTipoPor defectoDescripción
countnumberobligatorioNúmero total de slides
direction'vertical' | 'horizontal''vertical'Dirección del desplazamiento
size[number, number] | undefinedundefinedAncho y alto como [width, height]. Si se omite, el tamaño se mide con ResizeObserver
initialIndexnumber0Índice del slide inicial
loopbooleanfalseActiva el bucle infinito
transitionTransitionTransformFnslideTransitionFunción del efecto de transición. Incluidas: slideTransition, fadeTransition, flipTransition, cubeTransition, zoomTransition
transitionDurationnumber300Duración de la animación en ms
swipeDistanceFactornumber0.12Umbral del deslizamiento (0-1)
enableGesturesbooleantrueActiva la navegación arrastrando con el dedo o el ratón
enableNavKeysbooleantrueActiva la navegación con las teclas de flecha
enableWheelbooleanfalseActiva la navegación con la rueda del ratón
wheelDebounceMsnumber200Debounce de los eventos de la rueda en ms
rangeExtractor(index: number, count: number) => number[]defaultRangeExtractorFunción propia que decide qué índices se renderizan
keyExtractor(index: number, indexInRange: number) => string | numberindex => indexFunción propia de claves para las expresiones track de @for (útil con loop)
classNamestring''Clase CSS que se aplica al elemento contenedor raíz
ariaLabelstring'Carousel'Etiqueta accesible de la región del carrusel

Outputs

OutputTipoDescripción
afterChangeEventEmitter<{ index: number; indexInRange: number }>Se emite al terminar la transición del slide
beforeChangeEventEmitter<{ index: number; nextIndex: number; indexInRange: number }>Se emite antes de que empiece la transición del slide
slideDragStartEventEmitter<number>Se emite al empezar un gesto de arrastre
slideDragEndEventEmitter<number>Se emite al terminar un gesto de arrastre (al soltar)
slideDragCanceledEventEmitter<number>Se emite cuando se cancela un gesto de arrastre (vuelve a su sitio)
apiReadyEventEmitter<ReelApi>Se emite una vez tras iniciarse la vista y expone la API imperativa

Interfaz ReelApi

Se obtiene con el output (apiReady):

typescript
import { type ReelApi } from '@reelkit/angular';

@Component({ ... })
export class AppComponent {
  api: ReelApi | undefined;

  // In template: (apiReady)="api = $event"

  prev()  { this.api?.prev(); }
  next()  { this.api?.next(); }
  jump(i: number) { this.api?.goTo(i, true); }  // animated
}
MétodoTipoDescripción
next()() => voidVa al slide siguiente
prev()() => voidVa al slide anterior
goTo(index, animate?)(number, boolean?) => Promise<void>Navega al índice de un slide concreto
adjust()() => voidRecalcula las posiciones de los slides (útil tras un cambio de diseño)
observe()() => voidEmpieza a escuchar los eventos de teclado
unobserve()() => voidDeja de escuchar los eventos de teclado

RkReelItemDirective

Selector: [rkReelItem]. Se aplica a un ng-template dentro de rk-reel.

Contexto de la plantilla

html
<ng-template rkReelItem let-i let-indexInRange="indexInRange" let-size="size">
  <!-- $implicit (let-i)  : number         — absolute slide index -->
  <!-- indexInRange        : number         — position in the visible window (0, 1, or 2) -->
  <!-- size                : [number,number] — [width, height] of the container -->
</ng-template>
VariableTipoDescripción
$implicit (let-i)numberÍndice absoluto del slide (de 0 a count-1)
indexInRangenumberPosición en la ventana visible (0, 1 o 2)
size[number, number]Dimensiones actuales del slider como [width, height] en píxeles

ReelIndicatorComponent

Selector: rk-reel-indicator

Inputs

InputTipoPor defectoDescripción
countnumber | undefinedautoNúmero total de elementos. Se conecta solo al contexto del rk-reel padre cuando está dentro de uno; pásalo explícitamente si lo usas por separado
activenumber | undefinedautoÍndice activo actual. Se conecta solo al contexto del rk-reel padre cuando está dentro de uno; pásalo explícitamente si lo usas por separado
direction'vertical' | 'horizontal''vertical'Orientación del indicador
radiusnumber3Radio del punto en píxeles
visiblenumber5Máximo de puntos visibles a la vez a tamaño normal
gapnumber4Espacio entre puntos en píxeles
activeColorstring'#fff'Color del punto activo
inactiveColorstring'rgba(255,255,255,0.5)'Color de los puntos inactivos
edgeScalenumber0.5Factor de escala de los puntos de los bordes que desbordan
classNamestring''Clase CSS propia que se aplica al contenedor del indicador
tablistLabelstring'Slide navigation'Etiqueta accesible del landmark del tablist

Outputs

OutputTipoDescripción
dotClickEventEmitter<number>Se emite al hacer clic en un punto; incluye el índice del punto

RK_REEL_CONTEXT

Un InjectionToken<ReelContextValue> que rk-reel proporciona a sus descendientes. rk-reel-indicator lo usa internamente para conectarse solo. Inyéctalo en componentes propios que necesiten el contexto del slider.

typescript
import { inject } from '@angular/core';
import { RK_REEL_CONTEXT } from '@reelkit/angular';

@Component({ ... })
export class MyCustomControl {
  private readonly ctx = inject(RK_REEL_CONTEXT, { optional: true });

  jump(index: number) {
    this.ctx?.goTo(index, true);
  }
}
PropiedadTipoDescripción
indexSignal<number>Índice reactivo del slide actual
countSignal<number>Recuento reactivo del total de elementos
goTo(index: number, animate?: boolean) => Promise<void>Navega a un slide por código

BodyLockService

Bloqueo del scroll del body con recuento de referencias. Varios llamadores a la vez (por ejemplo, un lightbox y un modal abiertos al mismo tiempo) pueden bloquear y desbloquear cada uno por su cuenta: el body solo se restaura cuando lo libera el último. Se proporciona en la raíz, así que puedes inyectarlo en cualquier sitio.

typescript
import { inject } from '@angular/core';
import { BodyLockService } from '@reelkit/angular';

@Component({ ... })
export class OverlayComponent {
  private readonly bodyLock = inject(BodyLockService);

  open() { this.bodyLock.lock(); }
  close() { this.bodyLock.unlock(); }
}
MiembroTipoDescripción
lockedboolean (getter)Indica si el body está bloqueado
lock()() => voidBloquea el scroll del body y compensa el ancho de la barra de desplazamiento
unlock()() => voidRestaura los estilos de scroll originales del body

Utilidades del puente de señales

Funciones de utilidad que conectan el sistema de señales del core (@reelkit/core) con la API de señales nativa de Angular. Las usa internamente ReelComponent y también están disponibles para integraciones propias.

FunciónFirmaDescripción
toAngularSignal(source: Subscribable<T>, destroyRef: DestroyRef) => Signal<T>Convierte un Subscribable del core en un Signal de Angular de solo lectura
animatedSignalBridge(source: AnimatedValue, zone: NgZone, cdRef: ChangeDetectorRef, destroyRef: DestroyRef) => Signal<number>Convierte un valor animado del core en un Signal de Angular que se actualiza con requestAnimationFrame fuera de la zona
typescript
import { DestroyRef, inject } from '@angular/core';
import { toAngularSignal } from '@reelkit/angular';
import { createSliderController } from '@reelkit/core';

// Custom component using low-level signal bridge
const destroyRef = inject(DestroyRef);
const controller = createSliderController({ count: 10 }, {});
const index = toAngularSignal(controller.state.index, destroyRef);

createOverlayUrlState

OverlayUrlStateOptions

Crea un controlador de estado en la URL para un overlay, que después pasas a <rk-lightbox-url-overlay> en su input [controller]. Llámalo en un contexto de inyección, como el inicializador de un campo o el constructor; se conecta al momento y se libera con DestroyRef. Explicación paso a paso: el estado en la URL en la página de Angular Lightbox.

OpciónTipoPor defectoDescripción
paramstringrequiredParámetro de la query que lleva el slide activo, por ejemplo photo.
adapterUrlAdapterHistory APISistema de navegación con el que leer y escribir. En una aplicación con router, pasa un adaptador basado en el Router para que su ubicación no quede desfasada.
codecUrlCodec<Id>requiredFormato: texto del parámetro a una identidad estable. Va con locator como un par a juego: usa ...urlIndexKey(() => images().length) para la galería ?photo=3 por defecto, o aporta uno propio para que un marcador sobreviva a los cambios de orden.
locatorUrlLocator<Id>requiredConvierte la identidad en una posición y decide su propia validez: locate (síncrono), locateAsync (alternativa asíncrona para una galería paginada), identify (escrituras).

createRouterUrlAdapter

@reelkit/angular/ng-router-url-adapter

Un UrlAdapter basado en el Router de Angular. Pásalo como opción adapter de createOverlayUrlState en una aplicación con router para que el Router siga siendo la única fuente de verdad de la navegación: escribir con history.pushState a sus espaldas deja su ubicación desfasada y su siguiente navegación pierde el parámetro. Las escrituras solo tocan la query, así que la ruta, el fragmento y las claves repetidas como ?tag=a&tag=b se mantienen intactos. Cada cambio indica si el Router hizo push en la misma página, sustituyó la entrada o se movió por el historial, así que una galería abierta desde un routerLink se cierra volviendo atrás una vez. Llámalo en un contexto de inyección; la suscripción al router se libera con DestroyRef.

Se publica en su propia subruta, así que una aplicación sin routing nunca mete @angular/router en su bundle. @angular/router es una peer dependency opcional.

typescript
import { createRouterUrlAdapter } from '@reelkit/angular/ng-router-url-adapter';

protected readonly photo = createOverlayUrlState({
  param: 'photo',
  adapter: createRouterUrlAdapter(),
  ...urlIndexKey(() => this.images().length),
});

Accesibilidad

<rk-reel> se renderiza como role="region" con aria-roledescription="carousel". Usa el input ariaLabel para darle a la región un nombre para los lectores de pantalla. Una región en vivo educada anuncia "Slide N of M" en cada cambio de slide. Los slides inactivos reciben el atributo inert, así que el foco y la navegación con tecnologías de apoyo se los saltan.

<rk-reel-indicator> se renderiza como role="tablist" con tabindex itinerante en los puntos; las flechas mueven el foco y Intro o Espacio activan el slide.

¿Vas a crear un modal propio alrededor de <rk-reel>? captureFocusForReturn, createFocusTrap y getFocusableElements se reexportan desde @reelkit/angular para devolver y atrapar el foco.

Exports del paquete

Todos los exports públicos de @reelkit/angular:

typescript
// Components & directives
import {
  ReelComponent,
  ReelIndicatorComponent,
  RkReelItemDirective,
  RkSwipeToCloseDirective,
} from '@reelkit/angular';

// Types
import type {
  ReelApi,
  ReelContextValue,
  RkReelItemContext,
  CoreSignal,
  Subscribable,
  AnimatedValue,
  RangeExtractor,
  SliderDirection,
  Disposer,
  DisposableList,
  GestureController,
  SliderController,
  ContentLoadingController,
  ContentPreloader,
  ContentPreloaderConfig,
  SoundController,
  BodyLock,
  TransitionTransformFn,
  SlideTransformStyle,
  SwipeToCloseDirection,
} from '@reelkit/angular';

// Context
import { RK_REEL_CONTEXT } from '@reelkit/angular';

// Services
import { BodyLockService } from '@reelkit/angular';

// Signal bridges
import { toAngularSignal, animatedSignalBridge } from '@reelkit/angular';

// Core re-exports
import {
  // Signals & reactivity
  createSignal, createComputed, reaction, batch,

  // Transitions
  slideTransition, fadeTransition, flipTransition,
  cubeTransition, zoomTransition, getSlideProgress,

  // Content loading & preloading
  createContentLoadingController, createContentPreloader,

  // Sound
  createSoundController, syncMutedToVideo,

  // Fullscreen
  fullscreenSignal, requestFullscreen, exitFullscreen,

  // DOM & cleanup
  observeDomEvent, createDisposableList, createBodyLock, sharedBodyLock,

  // Focus management
  captureFocusForReturn, createFocusTrap, getFocusableElements,

  // Slider & gestures
  createSliderController, createGestureController,
  defaultRangeExtractor, createDefaultKeyExtractorForLoop,

  // Video
  captureFrame, createSharedVideo,

  // Utilities
  animate, noop, clamp, abs, first, last, extractRange,
} from '@reelkit/angular';