Documentación
FRONTEND
<aoc-autocomplete> #
Este componente se usa para mostrar seleccionar un modelo de entre una lista cargada desde el backend.
A nivel visual, es un desplegable con la peculiaridad que se puede escribir dentro de su input para la búsqueda.
Inputs #
| Nombre | Tipo | Descripción |
|---|---|---|
| modelConfig | AocModelConfig | La instancia model-config que se usará internamente |
| display | AocModelConfig | Define cómo se mostrará el modelo, por defecto usa el transform del model-config |
| restOptions | AocRestOptions | Las opciones de carga para la api rest |
| where | AocFilterQuery | Condiciones de búsqueda que se mezclarán con restOptions |
| overlayMaxHeight | string | La altura máxima del overlay de selección (por defecto 200px) |
| minlength | number | Número de caracteres mínimo para iniciar búsqueda |
| optionsPerPage | number | Opciones por página del overlay (por defecto 5) |
| modelEmiter | AocModelListener | Emisor para la selección del modelo |
| modelListener | AocModelListener | Estructura de gestión de cambios en el modelo, se usa sobretodo para añadir dependencias de otro componente en el where |
| dynFormGroup | AocDynFormGroup | Configuración de FormGroup dinámico |
| optionNgStyle | AocUiNgStyle | Define un estilo para las opciones del overlay |
| optionNgClass | AocUiNgClass | Define una clase para las opciones del overlay |
Se han omitido Inputs de menor importancia
Outputs #
| Nombre | Tipo | Descripción |
|---|---|---|
| whereChange | AocFilterQuery | Emite el cambio de la condición where |
| restOptionsChange | AocRestOptions | Emite el cambio en las restOptions |
| modelsChange | Array | Emite el cambio de modelos |
| onFocus | any | Emite en foco |
| onBlur | any | Emite en blur |
| onDropdownClick | any | Emite en clic para dropdown |
| onQuery | any | Emite en búsqueda |
| onInputEnterKeyPressed | any | Emite en presionar enter |
Ejemplo #
<aoc-autocomplete [modelConfig]="modelConfig" [restOptions]="restOptions" [placeholder]="placeholder"></aoc-autocomplete>
export class GenderAutocompleteComponent implements OnInit {
@Input() placeholder: string;
@Input() allow: AocModelConfigAllow;
protected restOptions: AocRestOptions<Gender> = {
orderBy: {
name: 'asc'
}
};
constructor(protected modelConfig: GenderModelConfig) {}
ngOnInit() {
if (this.allow) {
// Cambiar permisos, útil si quiere ocultar los botones añadir, editar y eliminar cuando se usa como filtro
this.modelConfig = this.modelConfig.cloneWithAllow(this.allow);
}
}
}
Vea el ejemplo completo en quest-client/src/app/features/schemas/common/gender/gender-autocomplete.component.ts
API #
Definición completa en la API.
<aoc-autocomplete-local> #
Este componente encapsula a <aoc-autocomplete> de forma que le permite utilizar modelos locales (en memoria). Es útil cuando,
por ejemplo, en un formulario necesita un campo que depende de información seleccionada en el mismo formulario y que todavía
no ha sido persistida en la base de datos.
Inputs #
| Nombre | Tipo | Descripción |
|---|---|---|
| modelConfig | AocModelConfig | La instancia model-config que se usará internamente |
| aocModels | AocModel[] | El array de modelos que utilizará el aoc-autocomplete |
| placeholder | string | El texto placeholder que aparecerá en el input |
API #
Definición completa en la API.
Por favor, busque en Issues y Discussions en Github para más información