The AOC Framework
Documentation
FRONTEND
<aoc-autocomplete> #
This component is used to display and select a model from a list loaded from the backend.
Visually, it is a dropdown that uniquely allows you to type inside its input for searching.
Inputs #
| Name | Type | Description |
|---|---|---|
| modelConfig | AocModelConfig | The model-config instance that will be used internally |
| display | AocModelConfig | Defines how the model will be displayed, by default uses the transform from the model-config |
| restOptions | AocRestOptions | The loading options for the REST API |
| where | AocFilterQuery | Search conditions that will be mixed with restOptions |
| overlayMaxHeight | string | The maximum height of the selection overlay (default 200px) |
| minlength | number | Minimum number of characters to start a search |
| optionsPerPage | number | Options per page in the overlay (default 5) |
| modelEmitter | AocModelListener | Emitter for model selection |
| modelListener | AocModelListener | Structure for managing changes in the model, mainly used to add dependencies from another component in the where |
| dynFormGroup | AocDynFormGroup | Dynamic FormGroup configuration |
| optionNgStyle | AocUiNgStyle | Defines a style for the overlay options |
| optionNgClass | AocUiNgClass | Defines a class for the overlay options |
Less significant inputs have been omitted
Outputs #
| Name | Type | Description |
|---|---|---|
| whereChange | AocFilterQuery | Emits the change in the where condition |
| restOptionsChange | AocRestOptions | Emits changes in the restOptions |
| modelsChange | Array | Emits the change of models |
| onFocus | any | Emits on focus |
| onBlur | any | Emits on blur |
| onDropdownClick | any | Emits on dropdown click |
| onQuery | any | Emits on search |
| onInputEnterKeyPressed | any | Emits when enter is pressed |
Example #
<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) {
// Change permissions, useful for hiding add, edit, and delete buttons when used as a filter
this.modelConfig = this.modelConfig.cloneWithAllow(this.allow);
}
}
}
See the full example at quest-client/src/app/features/schemas/common/gender/gender-autocomplete.component.ts
Api #
Full definition in the API.
<aoc-autocomplete-local> #
This component encapsulates <aoc-autocomplete> in a way that allows it to use local (in-memory) models. It is useful when,
for example, a field in a form depends on information selected in the same form that has not yet been persisted to the database.
Inputs #
| Name | Type | Description |
|---|---|---|
| modelConfig | AocModelConfig | The model-config instance that will be used internally |
| aocModels | AocModel[] | The array of models that the aoc-autocomplete will use |
| placeholder | string | The placeholder text that will appear in the input |
Api #
Full definition in the API.
Please note, browse Issues and Discussions in Github for more information
© 2025 Atlantis of Code. All rights reserved.
All trademarks are the property of their respective owners.