Guachos General Autocomplete

Guachos General Autocomplete es una librería para Angular que proporciona un componente con una funcionalidad de autocompletar elementos con peticiones a un API-REST.

Instalación

Con npm

npm i guachos-general-autocomplete --save

Con yarn

yarn add guachos-general-autocomplete

Con pnpm

pnpm add guachos-general-autocomplete

Importar la dependencia en tu proyecto.

import {GuajiritosGeneralAutocomplete} from '@guajiritos/general-autocomplete';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    GuachosGeneralAutocompleteModule,
    BrowserAnimationsModule
  ]
})

Importar la etiqueta en el componente correspondiente.

...
<guachos-general-autocomplete></guachos-general-autocomplete>
...

Entrada

Como elementos opcionales se pueden introducir los siguientes campos:

• floatLabel - Corresponde a un valor FloatLabelType de @angular/material. Por defecto toma valor auto

...
<guachos-general-autocomplete [floatLabel]="'always'"></guachos-general-autocomplete>
...

• bodyRequest - Corresponde a un valor de la interfaz ApiFormData.
• debounceTimeValue - Valor numérico para el tiempo de espera entre peticiones con la entrada de datos de búsqueda. Por defecto 250 ms.
• detailsTemplate - Corresponde a un valor TemplateRef.
• label - Corresponde al texto a mostrar en el componente del input.
• showLabel - Muestra u oculta el label.
• showSuffix - Muestra u oculta el ícono del input.
• suffixIcon - Nombre del ícono de material usado como sufijo del input. Se muestra si showSuffix está activo y por defecto tiene valor search.

...
<guachos-general-autocomplete [label]="Hoteles"></guachos-general-autocomplete>
...

• placeholder - Corresponde al texto del placeholder a mostrar en el componente del input.

...
<guachos-general-autocomplete [placeholder]="Seleccione un hotel"></guachos-general-autocomplete>
...

• field - Un arreglo de valores correspondiente a la ruta del campo a mostrar en el componente de autocomplete.

...
<guachos-general-autocomplete [field]="['hotel', 'name']"></guachos-general-autocomplete>
...

• filterString - Corresponde a los posibles filtros que se pueden enviar en las peticiones.
• displayOptions - Corresponde a un valor de la interfaz DisplayOption.
• withoutPaddingBottom - Si elimina el relleno del componente.
• valueId - Si el valor a manejar es el id del objeto. Por defector toma valor false.

...
<guachos-general-autocomplete [valueId]="true"></guachos-general-autocomplete>
...

• order - Parámetro para ordenar la respuesta de las peticiones.
• removeProperties - Eliminar propiedades de las peticiones.
• url - Ruta para las peticiones API.

...
<guachos-general-autocomplete [url]="https://www.guajiritos.com/"></guachos-general-autocomplete>
...

• clearData - Limpia los valores del formulario reactivo.
• initialValue - Valor inicial del formulario reactivo.
• restrictions - Restricciones de las peticiones.
• isRequired - Es requerida la selección de algún valor. Por defecto toma valor false.

...
<guachos-general-autocomplete [isRequired]="true"></guachos-general-autocomplete>
...

• doFocus - Activa la propiedad focus del elemento.

Salida

Salida del componente

• SelectElement - Elemento seleccionado

Entrada de formulario reactivo

Este componente permite la entrada de un formulario reactivo para el manejo de los valores.

...
<guachos-general-autocomplete [formControl]="control"></guachos-general-autocomplete>
...

o

...
<guachos-general-autocomplete formControlName="controlName"></guachos-general-autocomplete>
...