### File

`packages/components/directives/eui-loading.directive.ts`

### Description

Directive displaying a loading spinner icon inside input fields during async operations. Dynamically creates and positions a loading icon that appears when euiLoading is true. Automatically manages wrapper div for icon positioning and handles readonly state. Compatible with euiClearable directive for combined loading and clear functionality.

Example :

    <input euiInputText [euiLoading]="isSearching" [(ngModel)]="searchTerm" />

Example :

    isSearching = false;

    onSearch() {
      this.isSearching = true;
      this.api.search().subscribe(() => this.isSearching = false);
    }

### Accessibility

- Loading icon positioned at end of input for visual feedback
- Input becomes readonly while loading to prevent changes during operation
- Icon has aria-label for screen reader announcement

### Notes

- Loading icon automatically positioned at input end
- Works alongside euiClearable directive without conflicts
- Wrapper div created automatically for icon positioning
- Input set to readonly state when loading is active

### Implements

`OnChanges`

### Metadata

Selector | `[euiLoading]`

### Index

###### Inputs

- euiLoading
- readonly

###### HostBindings

- class

###### Accessors

- readonly
- cssClasses

### Inputs

euiLoading
Type : `boolean`

readonly
Type : `any`

### HostBindings

class
Type : `string`

### Accessors

readonly
get `readonly()`
set `readonly(v: BooleanInput)`

Parameters :

Name | Type | Optional
v | `BooleanInput` | No

Returns : `void`

cssClasses
get `cssClasses()`
set `cssClasses(value: string)`

Parameters :

Name | Type | Optional
value | `string` | No

Returns : `void`

# results matching ""

# No results matching ""