### 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 :

    ### Basic usage
    ```html
    <input [euiMaxlength]="50">

### With form control

Example :

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

### Hide maxlength indicator

Example :

    <textarea [euiMaxlength]="200" [isShowMaxlength]="false"></textarea>

### 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

input

paste
Arguments : `'$any($event)'`

### Methods

onChange
`onChange()`
Decorators : `@HostListener('change')`
Returns : `void`

onInput
`onInput()`
Decorators : `@HostListener('input')`
Returns : `void`

onPaste
`onPaste(event: ClipboardEvent)`
Decorators : `@HostListener('paste', ['$any($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 :
    // Custom length calculation excluding spaces
    directive.setLengthCalcFactory((value: string) => value.replace(/\s/g, '').length);
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 ""