Toolbar
Beta

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

Loading example

Navigation with loading states during async operations like data fetching.

Loading...

Item navigation example

Navigation through a list of items with proper boundary detection.

{{ currentItem().title }}

{{ currentItem().description }}

Item {{ currentIndex() + 1 }} of {{ items.length }}

Pagination-style navigation with page numbers and navigation controls.

Page {{ currentPage() }} of {{ totalPages() }}

Navigator

Key Features

  • Flexible Content: Center content area using Angular's content projection
  • Navigation Controls: Previous and next buttons with customizable states
  • Disabled State Support: Individual control over button availability
  • Consistent Styling: Uniform appearance across different use cases
  • Icon Integration: Built-in chevron icons for navigation direction
  • Event Emission: Clean event handling for navigation actions
  • Responsive Layout: Proper spacing and alignment on all screen sizes

Configuration Options

Content Projection

The component accepts any content between its tags, which will be centered between the navigation buttons.

Use Cases

Perfect for page navigation, date navigation, item browsing, image galleries, multi-step forms, wizards, and any scenario requiring previous/next navigation patterns. Ideal for data pagination and sequential content display.

Accessibility

  • Keyboard Navigation: Tab navigation between buttons
  • Screen Reader Support: Proper ARIA labels on navigation buttons
  • Focus Management: Logical focus flow
  • Disabled State: Proper disabled attribute handling
  • Semantic HTML: Uses button elements for interactive controls

Performance

  • Event Handling: Efficient event emission without unnecessary processing
  • Content Projection: Minimal overhead for content rendering
  • Button States: Reactive updates without full re-rendering
  • Memory Management: No subscriptions or complex state management