Angular API Reference

Complete reference for @reelkit/angular components, directives, services, and utilities.

ReelComponent

Selector: rk-reel

Inputs

Input	Type	Default	Description
count	number	required	Total number of slides
direction	'vertical' \| 'horizontal'	'vertical'	Scroll direction
size	[number, number] \| undefined	undefined	Width and height as [width, height]. When omitted, auto-measures via ResizeObserver
initialIndex	number	0	Starting slide index
loop	boolean	false	Enable infinite loop
transition	TransitionTransformFn	slideTransition	Transition effect function. Built-in: slideTransition, fadeTransition, flipTransition, cubeTransition, zoomTransition
transitionDuration	number	300	Animation duration in ms
swipeDistanceFactor	number	0.12	Swipe threshold (0-1)
enableGestures	boolean	true	Enable touch/mouse drag navigation
enableNavKeys	boolean	true	Enable keyboard arrow key navigation
enableWheel	boolean	false	Enable mouse wheel navigation
wheelDebounceMs	number	200	Wheel event debounce in ms
rangeExtractor	(index: number, count: number) => number[]	defaultRangeExtractor	Custom function to determine which indexes are rendered
keyExtractor	(index: number, indexInRange: number) => string \| number	index => index	Custom key function for @for track expressions (useful with loop)
className	string	''	CSS class applied to the root container element
ariaLabel	string	'Carousel'	Accessible label for the carousel region

Outputs

Output	Type	Description
afterChange	EventEmitter<{ index: number; indexInRange: number }>	Emitted after slide transition completes
beforeChange	EventEmitter<{ index: number; nextIndex: number; indexInRange: number }>	Emitted before slide transition begins
slideDragStart	EventEmitter<number>	Emitted when a drag gesture starts
slideDragEnd	EventEmitter<number>	Emitted when a drag gesture ends (released)
slideDragCanceled	EventEmitter<number>	Emitted when a drag gesture is canceled (snap-back)
apiReady	EventEmitter<ReelApi>	Emitted once after view init, exposing the imperative API

ReelApi Interface

Obtained via the (apiReady) output:

typescript

Method	Type	Description
next()	() => void	Go to next slide
prev()	() => void	Go to previous slide
goTo(index, animate?)	(number, boolean?) => Promise<void>	Navigate to a specific slide index
adjust()	() => void	Recalculate slide positions (useful after layout change)
observe()	() => void	Start listening to keyboard events
unobserve()	() => void	Stop listening to keyboard events

RkReelItemDirective

Selector: [rkReelItem] — Applied to an ng-template inside rk-reel.

Template Context

html

Variable	Type	Description
$implicit (let-i)	number	Absolute slide index (0 to count-1)
indexInRange	number	Position in the visible window (0, 1, or 2)
size	[number, number]	Current slider dimensions as [width, height] in pixels

ReelIndicatorComponent

Selector: rk-reel-indicator

Inputs

Input	Type	Default	Description
count	number \| undefined	auto	Total number of items. Auto-connected from parent rk-reel context when nested inside one; pass explicitly when used standalone
active	number \| undefined	auto	Current active index. Auto-connected from parent rk-reel context when nested inside one; pass explicitly when used standalone
direction	'vertical' \| 'horizontal'	'vertical'	Indicator orientation
radius	number	3	Dot radius in pixels
visible	number	5	Max normal-sized dots visible at once
gap	number	4	Space between dots in pixels
activeColor	string	'#fff'	Active dot color
inactiveColor	string	'rgba(255,255,255,0.5)'	Inactive dot color
edgeScale	number	0.5	Scale factor for edge overflow dots
className	string	''	Custom CSS class applied to the indicator container
tablistLabel	string	'Slide navigation'	Accessible label for the tablist landmark

Outputs

Output	Type	Description
dotClick	EventEmitter<number>	Emitted when a dot is clicked; provides the dot index

RK_REEL_CONTEXT

An InjectionToken<ReelContextValue> provided by rk-reel to its descendants. Used internally by rk-reel-indicator for auto-connect behavior. Inject it in custom components that need slider context.

typescript

Property	Type	Description
index	Signal<number>	Reactive current slide index
count	Signal<number>	Reactive total item count
goTo	(index: number, animate?: boolean) => Promise<void>	Programmatically navigate to a slide

BodyLockService

Reference-counted body scroll lock. Multiple concurrent callers (e.g. a lightbox and a modal both open) can each call lock/unlock independently — the body is only restored once the last caller releases it. Provided at root — inject anywhere.

typescript

Member	Type	Description
locked	boolean (getter)	Whether the body is currently locked
lock()	() => void	Lock body scroll and apply scrollbar width compensation
unlock()	() => void	Restore original body scroll styles

Signal Bridge Utilities

Utility functions that bridge the core signal system (@reelkit/core) with Angular's native signal API. Used internally by ReelComponent; also available for custom framework integrations.

Function	Signature	Description
toAngularSignal	(source: Subscribable<T>, destroyRef: DestroyRef) => Signal<T>	Bridges a core Subscribable into a read-only Angular Signal
animatedSignalBridge	(source: AnimatedValue, zone: NgZone, cdRef: ChangeDetectorRef, destroyRef: DestroyRef) => Signal<number>	Bridges a core animated value into an Angular Signal, updating via requestAnimationFrame outside the zone

typescript

Accessibility

<rk-reel> renders as role="region" with aria-roledescription="carousel". Set the ariaLabel input to give the region a screen-reader name. A polite live region announces "Slide N of M" on every slide change. Inactive slides receive the inert attribute so focus and AT navigation skip them.

<rk-reel-indicator> renders as role="tablist" with roving tabindex on the dots; arrow keys move focus and Enter or Space activates the slide.

Building a custom modal around <rk-reel>? captureFocusForReturn, createFocusTrap, and getFocusableElements are re-exported from @reelkit/angular for focus return and trap.

Package Exports

All public exports from @reelkit/angular:

typescript