### File

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

### Description

A directive that adds maxLength functionality to input and textarea elements with visual feedback. It shows the remaining characters count and provides visual indication when the limit is reached.

Example :

    ```HTML
    <!-- Basic usage -->
    <input [euiMaxlength]="50">

<input [formControlName]="'name'" [euiMaxlength]="100">

Example :

### Implements

`AfterContentInit` `OnDestroy` `OnChanges`

### Metadata

Selector | `input[euiMaxlength], textarea[euiMaxlength], [ngModel][euiMaxlength], [formControlName][euiMaxlength]`

### Index

###### Properties

- valueChangesSubscription

###### Methods

- onChange
- onInput
- onPaste
- Public setLengthCalcFactory

###### Inputs

- euiMaxlength
- isShowMaxlength

###### Outputs

- maxLengthReached

###### HostListeners

- change
- input
- paste

### Constructor

`constructor()`

### Inputs

euiMaxlength
Type : `number`

isShowMaxlength
Type : `boolean`
Default value : `true`

### Outputs

maxLengthReached
Type : `EventEmitter<boolean>`
Emits when the input value length reaches or exceeds the maxLength limit. Emits true when a limit is reached, false when below limit.

### HostListeners

change
Arguments : `'$event'`

input
Arguments : `'$event'`

paste
Arguments : `'$event'`

### Methods

onChange
`onChange(event: Event)`
Decorators : `@HostListener('change', ['$event'])`

Parameters :

Name | Type | Optional
event | `Event` | No

Returns : `void`

onInput
`onInput(event: KeyboardEvent)`
Decorators : `@HostListener('input', ['$event'])`

Parameters :

Name | Type | Optional
event | `KeyboardEvent` | No

Returns : `void`

onPaste
`onPaste(event: ClipboardEvent)`
Decorators : `@HostListener('paste', ['$event'])`

Parameters :

Name | Type | Optional
event | `ClipboardEvent` | No

Returns : `void`

Public setLengthCalcFactory
`setLengthCalcFactory(fn: (input: string) => void)`

Sets a custom function to calculate the length of the input value. Useful for implementing custom length calculation logic (e.g., counting characters differently).

Example :

    ```typescript
    // Custom length calculation excluding spaces
    directive.setLengthCalcFactory((value: string) => value.replace(/\s/g, '').length);

Example :

Parameters :

Name | Type | Optional | Description
fn | `function` | No | Function that takes a string input and returns its calculated length

Returns : `void`

### Properties

valueChangesSubscription
Type : `Subscription`

# results matching ""

# No results matching ""