### 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`
It accepts number values to indicate the maxLength of an input. To reset or disable it set the value to null. NULL value will remove any MaxLength indicator even if another input like isShowMaxlength equals true.

isShowMaxlength
Type : `boolean`
Default value : `true`
Controls the visibility of the maxLength indicator. When true, shows a counter with remaining characters. When false, hides the counter but maintains the maxLength restriction.

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