NgxCombobox

This library was generated for you use.

Demo

You can play around with this library with playground{target="_blank"}.

How to install

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

Angular versions

The following list describes the compatibility with Angular:

| NgxCombobox | Angular| | ---------------- | ------- | | 1.x | 16.x | | 2.x | 17.x |

How to setup

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.

1. Import the ComboboxModule

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 {}

2. Import the styles

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;
}

Use of ngx-combobox

This is the way to use the component:

1. Use the ngx-combobox component.html

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>

2. Use the ngx-combobox component.ts

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 },
  ];
}

Some Configurations

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 |