A select input with a search option. It implements `ControlValueAccessor`. So you can use it as a part of your form. To use it first import it in your component or module.
A select input with a search option. It implements ControlValueAccessor. So you can use it as a part of your form. To use it first import it in your component or module.
``
import { SelectSearchAngular } from 'select-search-angular';
@Component({
selector: 'app-root',
template:
[idKey]="'label'"
[labelKey]="'value'"
[localSearch]="true"
(keySearchEvent)="searchItem($event)"
[(ngModel)]="itemSelected"
>,
'styles':
:host {
--suggestion-bg-color: red;
--suggestion-text-color: white;
--suggestion-font: italic 1.2rem "Fira Sans", serif;
--suggestion-hover-color: darkred;
--suggestion-line-height: 1.2;
--max-suggestions-height: 200px;
--suggestion-scroll: scroll;
}
imports: [ FormsModule, SelectSearchAngular],
})
- [list] accepts a signal of type list which should have the content you want to see in the select. If the variable passed here changes, changes will be reflected in the suggested list.
- [idKey] accepts the object key of the list item that would be used as value when an item in the select list is selected.
- [labelKey] accepts the object key of the list item that would be showed in the select list and used for search.
- [localSearch] Set it to true if you want to search within the list that you provided when typing. If set to false, you will have to implement your own search functionality in the function provided in (keySearchEvent).
- (keySearchEvent) You have to provide a function here. This function will not be called if [localSearch] is set to true. In this function you can implement your own search functionality. Here you can also fetch the results of search from a network request.
Also you can implement other functionalities of a form element (like [(ngModel)] or (ngModelChange)).
Here is an example of a component within which this component is used in the way shown above.
`
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SelectSearchAngular } from './select-search-angular/select-search-angular';
type DataType = { label: string, value: string };
@Component({
selector: 'app-root',
imports: [ FormsModule, SelectSearchAngular],
template:
[idKey]="'label'"
[labelKey]="'value'"
[localSearch]="false"
(keySearchEvent)="searchItem($event)"
[(ngModel)]="itemSelected"
>,
styles:
:host {
--suggestion-bg-color: red;
--suggestion-text-color: white;
--suggestion-font: italic 1.2rem "Fira Sans", serif;
--suggestion-hover-color: darkred;
--suggestion-line-height: 1.2;
--max-suggestions-height: 200px;
--suggestion-scroll: scroll;
}
.search-select {
position: relative;
width: 200px; height: 25px;
display: inline-block;
}
})
export class App {
allList = signal
/This allList variable will populate the suggestion list/
itemSelected = signal
/*The selected value will be assigned to itemSelected variable. If a
value is assigned to this variable and it is already present in the
allList variable (or the variable set to [list] label), then the
corresponding label will be shown in the search box. If the value
is not present in the list, the search box will be empty.
If you want to show a default value in the search box, make sure that
the value is present in the list.
*/
ngOnInit() {
const normalList = [
'Ng', 'Select', 'Search', 'Component', 'samin', 'sum', 'annana', 'mukimutsalat', 'supersum'
];
this.allList.set(normalList.map(e => {
/*Here we are populating the list. Any changes that may happen later
to this variable will also be refelceted in the suggestion list*/
return { label: e, value: e };
}));
}
searchItem(searchText: string) {
/*This function will be called for every keypress in
search field if [localSearch] is set to false*/
console.log('Search Text:', searchText);
}
}
`
In the stylesheet of this component, you can enter the css variables to change the styles of the component.
- --suggestion-bg-color: background color of the search results--suggestion-text-color
- : Text color of the search resuts--suggestion-font: italic
- : Font of the search results. Also applies to search box.--suggestion-hover-color
- : Background color of search results upon mouseover--suggestion-line-height
- : Line height of the suggestions. Use this to control the space between the search results.--max-suggestions-height
- : Max height of suggestion box.--suggestion-scroll
- : Set to scroll if you want scroll bar in suggestion box. Otherwise set it to hidden.
This project was generated using Angular CLI version 20.1.0. It can be used in projects that do not use zone.js`.