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
| Input | Tipo | Por defecto | Descripción |
|---|---|---|---|
count | number | obligatorio | Número total de slides |
direction | 'vertical' | 'horizontal' | 'vertical' | Dirección del desplazamiento |
size | [number, number] | undefined | undefined | Ancho y alto como [width, height]. Si se omite, el tamaño se mide con ResizeObserver |
initialIndex | number | 0 | Índice del slide inicial |
loop | boolean | false | Activa el bucle infinito |
transition | TransitionTransformFn | slideTransition | Función del efecto de transición. Incluidas: slideTransition, fadeTransition, flipTransition, cubeTransition, zoomTransition |
transitionDuration | number | 300 | Duración de la animación en ms |
swipeDistanceFactor | number | 0.12 | Umbral del deslizamiento (0-1) |
enableGestures | boolean | true | Activa la navegación arrastrando con el dedo o el ratón |
enableNavKeys | boolean | true | Activa la navegación con las teclas de flecha |
enableWheel | boolean | false | Activa la navegación con la rueda del ratón |
wheelDebounceMs | number | 200 | Debounce de los eventos de la rueda en ms |
rangeExtractor | (index: number, count: number) => number[] | defaultRangeExtractor | Función propia que decide qué índices se renderizan |
keyExtractor | (index: number, indexInRange: number) => string | number | index => index | Función propia de claves para las expresiones track de @for (útil con loop) |
className | string | '' | Clase CSS que se aplica al elemento contenedor raíz |
ariaLabel | string | 'Carousel' | Etiqueta accesible de la región del carrusel |
Outputs
| Output | Tipo | Descripción |
|---|---|---|
afterChange | EventEmitter<{ index: number; indexInRange: number }> | Se emite al terminar la transición del slide |
beforeChange | EventEmitter<{ index: number; nextIndex: number; indexInRange: number }> | Se emite antes de que empiece la transición del slide |
slideDragStart | EventEmitter<number> | Se emite al empezar un gesto de arrastre |
slideDragEnd | EventEmitter<number> | Se emite al terminar un gesto de arrastre (al soltar) |
slideDragCanceled | EventEmitter<number> | Se emite cuando se cancela un gesto de arrastre (vuelve a su sitio) |
apiReady | EventEmitter<ReelApi> | Se emite una vez tras iniciarse la vista y expone la API imperativa |
Interfaz ReelApi
Se obtiene con el output (apiReady):
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étodo | Tipo | Descripción |
|---|---|---|
next() | () => void | Va al slide siguiente |
prev() | () => void | Va al slide anterior |
goTo(index, animate?) | (number, boolean?) => Promise<void> | Navega al índice de un slide concreto |
adjust() | () => void | Recalcula las posiciones de los slides (útil tras un cambio de diseño) |
observe() | () => void | Empieza a escuchar los eventos de teclado |
unobserve() | () => void | Deja de escuchar los eventos de teclado |
RkReelItemDirective
Selector: [rkReelItem]. Se aplica a un ng-template dentro de rk-reel.
Contexto de la plantilla
<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>| Variable | Tipo | Descripción |
|---|---|---|
$implicit (let-i) | number | Índice absoluto del slide (de 0 a count-1) |
indexInRange | number | Posició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
| Input | Tipo | Por defecto | Descripción |
|---|---|---|---|
count | number | undefined | auto | Nú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 |
active | number | undefined | auto | Í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 |
radius | number | 3 | Radio del punto en píxeles |
visible | number | 5 | Máximo de puntos visibles a la vez a tamaño normal |
gap | number | 4 | Espacio entre puntos en píxeles |
activeColor | string | '#fff' | Color del punto activo |
inactiveColor | string | 'rgba(255,255,255,0.5)' | Color de los puntos inactivos |
edgeScale | number | 0.5 | Factor de escala de los puntos de los bordes que desbordan |
className | string | '' | Clase CSS propia que se aplica al contenedor del indicador |
tablistLabel | string | 'Slide navigation' | Etiqueta accesible del landmark del tablist |
Outputs
| Output | Tipo | Descripción |
|---|---|---|
dotClick | EventEmitter<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.
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);
}
}| Propiedad | Tipo | Descripción |
|---|---|---|
index | Signal<number> | Índice reactivo del slide actual |
count | Signal<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.
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(); }
}| Miembro | Tipo | Descripción |
|---|---|---|
locked | boolean (getter) | Indica si el body está bloqueado |
lock() | () => void | Bloquea el scroll del body y compensa el ancho de la barra de desplazamiento |
unlock() | () => void | Restaura 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ón | Firma | Descripció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 |
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ón | Tipo | Por defecto | Descripción |
|---|---|---|---|
param | string | required | Parámetro de la query que lleva el slide activo, por ejemplo photo. |
adapter | UrlAdapter | History API | Sistema 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. |
codec | UrlCodec<Id> | required | Formato: 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. |
locator | UrlLocator<Id> | required | Convierte 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.
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:
// 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';