Navigator
The FktNavigator component provides a reusable navigation control with previous/next buttons and a flexible content area. It's designed to be a consistent navigation pattern across different components and contexts.
Import
import {FktNavigatorComponent} from "frakton-ng/navigator";Basic
Basic navigator with both previous and next buttons enabled for simple navigation.
Previous disabled
Navigator with previous button disabled, useful when at the beginning of a sequence.
Next disabled
Navigator with next button disabled, useful when at the end of a sequence.
Both disabled
Navigator with both buttons disabled, useful when navigation is temporarily unavailable.
Basic example
Basic implementation showing simple previous/next navigation with counter state.
Date navigation example
Date navigation example showing how to navigate through dates with proper boundary conditions.
{{ formattedDate() }}
Disabled state example
Example demonstrating dynamic enable/disable states based on business logic.
Previous Disabled
Next Disabled
Both Disabled
Previous Disabled
Next Disabled
Both Disabled
Loading example
Navigation with loading states during async operations like data fetching.
@if (isLoading()) {
Loading...
}
Item navigation example
Navigation through a list of items with proper boundary detection.
First Item
This is the first item in the list
{{ currentItem().title }}
{{ currentItem().description }}
Item {{ currentIndex() + 1 }} of {{ items.length }}
Page navigation example
Pagination-style navigation with page numbers and navigation controls.
Page {{ currentPage() }} of {{ totalPages() }}