Autocomplete

A powerful and flexible autocomplete input component with dropdown options, search functionality, and support for custom actions. Built with Angular signals and reactive patterns, it offers seamless integration with forms and dynamic data sources.

Import

import {FktAutocompleteComponent} from "frakton-ng/autocomplete";

Basic

Basic autocomplete implementation with predefined options. Perfect starting point showing essential functionality with search and selection capabilities.


	

	@if (selectedOption()) {
		
			
				
					Selected option
				
				
			

			
				
					Value: {{ selectedOption()?.value }}
				
				
					Label: {{ selectedOption()?.label }}
				
			
		
	}

Auto creation

Auto-creation mode allows users to create new options by typing values not in the predefined list. Ideal for tag systems, category management, and dynamic data entry.

Tip: Type a country name that's not in the list to see the auto-creation feature in action.


	

	@if (selectedOption()) {
		
			
				
					Selected option
				
				
			

			
				
					Value: {{ selectedOption()?.value }}
				
				
					Label: {{ selectedOption()?.label }}
				
			
		
	}

	
		Tip: Type a country name that's not in the list to see the auto-creation feature in action.

Custom styling

Custom styling and disabled state demonstration. Shows how to apply visual customization and handle disabled states with interactive controls.

Status: Enabled


	
		
	

	

	@if (selectedOption()) {
		
			
				
					Selected option
				
				
			

			
				
					Value: {{ selectedOption()?.value }}
				
				
					Label: {{ selectedOption()?.label }}
				
			
		
	}

	
		Status: 
			{{ control().disabled() ? 'Disabled' : 'Enabled' }}

Events

Interactive functionality with event handling and custom actions. Demonstrates search events, value changes, and action button interactions with real-time event logging.

Event Log

No events yet. Try searching or clicking actions.

Available Actions

Edit - Modify the tag

Favorite - Mark as favorite

Delete - Remove the tag


	

	@if (selectedOption()) {
		
			
				
					Selected option
				
				
			

			
				
					Value: {{ selectedOption()?.value }}
				
				
					Label: {{ selectedOption()?.label }}
				
			
		
	}

	
		Event Log
		
			{{ lastEvent() || 'No events yet. Try searching or clicking actions.' }}
		
	

	
		Available Actions
		
			
				
				Edit - Modify the tag
			
			
				
				Favorite - Mark as favorite
			
			
				
				Delete - Remove the tag

Loading states

Loading states and no results handling with simulated API calls. Perfect for async data fetching scenarios with realistic loading indicators and empty state messaging.