This library was generated for you use.
You can play around with this library with playground{target="_blank"}.
You can get ngx-combobox via npm by either adding it as a new dependency to your package.json
file and running npm install
,
or running the following command:
npm install ngx-combobox
The following list describes the compatibility with Angular:
NgxCombobox | Angular |
---|---|
1.x |
16.x |
2.x |
17.x |
Before actually being able to use the ngx-combobox library within our code, we have to first set it up within Angular, and also bring the styles into our project.
First of all, make ngx-combobox globally available to your Angular application by importing
ComboboxModule
the your root Angular module. For example:
import { ComboboxModule} from 'ngx-combobox';
@NgModule({
imports: [ComboboxModule],
})
export class AppModule {}
You need to export the styles if you wish to do so from the angular.json
using the style array like this.
"styles": [
"node_modules/ngx-combobox/src/assets/css/ngx-combobox.css",
"src/styles.css"
],
Or customize the root styles like this.
:root {
--ngx-combobox-font-size: 14px;
--ngx-combobox-font-family: Arial, sans-serif;
--ngx-combobox-container-width: 100%;
--ngx-combobox-container-height: 200px;
--ngx-combobox-container-color: #333;
--ngx-combobox-container-background-color: #fff;
--ngx-combobox-container-border: 1px solid #ccc;
--ngx-combobox-container-border-radius: 4px;
--ngx-combobox-container-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
--ngx-combobox-container-hover-border-color: #000;
--ngx-combobox-scrollbar-vertical-width: 12px;
--ngx-combobox-scrollbar-horizontal-height: 12px;
--ngx-combobox-scrollbar-thumb-background-color: #797979;
--ngx-combobox-scrollbar-thumb-border-radius: 8px;
--ngx-combobox-scrollbar-thumb-border: 2px solid #646464;
--ngx-combobox-scrollbar-thumb-hover-background-color: #6e6e6e;
--ngx-combobox-scrollbar-track-border-radius: 8px;
--ngx-combobox-scrollbar-track-background-color: #f3f3f3;
--ngx-combobox-scrollbar-track-hover-background-color: #dbdbdb;
--ngx-combobox-arrow-color: 6px solid black;
--ngx-combobox-option-hover-background-color: #96b7f5;
--ngx-combobox-is-required-color: #ff0000;
--ngx-combobox-is-required-background-color: #ffffff;
--ngx-combobox-is-required-box-shadow: 2px 2px 0 rgb(116 93 93 / 10%);
--ngx-combobox-is-required-padding: 4px;
--ngx-combobox-is-required-font-weight: bold;
--ngx-combobox-is-required-border-radius: 8px;
--ngx-combobox-is-required-margin-top: 2px;
}
This is the way to use the component:
Use the ngx-combobox
component in this way.
<ngx-combobox
[dataList]="dataList"
[key]="'id'"
[propertiesReturn]="propertiesReturn"
(returnValue)="print($event)"
[namesValue]="namesValue"
placeholder="Buscar"
[limit]="50"
[required]="true"
[requiredMessage]="'Campo requerido'"
[containerClassList]="['cssClass1']"
[inputClassList]="['cssClass2']"
[selectClassList]="['cssClass3']"
[optionClassList]="['cssClass4']"
[spanClassList]="['cssClass5']"
[defaultSelected]="2"
></ngx-combobox>
If you need use ReactiveForms
then use this form
<form [formGroup]="currentForm">
<ngx-combobox
[dataList]="dataList"
[key]="'id'"
[propertiesReturn]="propertiesReturn"
(returnValue)="print($event)"
[namesValue]="namesValue"
placeholder="Buscar"
[limit]="50"
[required]="true"
[requiredMessage]="'Campo requerido'"
[containerClassList]="['cssClass1']"
[inputClassList]="['cssClass2']"
[selectClassList]="['cssClass3']"
[optionClassList]="['cssClass4']"
[spanClassList]="['cssClass5']"
[defaultSelected]="2"
formControlName="inputText"
></ngx-combobox>
</form>
Use the ngx-combobox
component in this way.
export class AppComponent {
public disabledInput: boolean = false;
public currentForm: FormGroup = this.fb.group({
inputText: [{ value: '', disabled: false }, []],
});
constructor(private fb: FormBuilder) {}
ngOnInit(): void {
this.currentForm.patchValue({
inputText: 'No se aplicará si se encuentra <defaultSelected>',
});
}
public returnProperties = {};
public propertiesReturn = ['id', 'name', 'lastName'];
public namesValue = ['name', 'lastName'];
public print(valueOutput: any) {
this.returnProperties = valueOutput;
console.log(valueOutput);
}
public disabled() {
if (this.disabledInput) {
this.currentForm.disable();
} else {
this.currentForm.enable();
}
this.disabledInput = !this.disabledInput;
}
public dataList = [
{ id: 1, name: 'Luis', lastName: 'Perez', age: 25 },
{ id: 2, name: 'Maria', lastName: 'Gomez', age: 30 },
{ id: 3, name: 'Juan', lastName: 'Gonzalez', age: 35 },
];
}
All properties that can you modify and whitch are requeried or optional.
Property | Required | Type | Defaults values |
---|---|---|---|
dataList |
true | array | |
key |
true | string | |
propertiesReturn |
false | array | return {...allProperties}
|
returnValue |
true | Function | |
namesValue |
true | array | |
placeholder |
false | string | a void ''
|
limit |
false | number | 100 |
required |
false | boolean | false |
requiredMessage |
false | string | a void ''
|
containerClassList |
false | array | |
inputClassList |
false | array | |
containerClassList |
false | array | |
selectClassList |
false | array | |
optionClassList |
false | array | |
spanClassList |
false | array | |
defaultSelected |
false | any | matches the given key |
formControlName |
false | string | Excluide by defaultSelected
|