# AutocompleteTextareaComponent
The `AutocompleteTextarea` component is used by the [`MessageInput`](https://getstream.io/chat/docs/sdk/angular/v5/components/MessageInputComponent/) component to display the input HTML element where users can type their message.
Message send can be triggered with the `Enter` key, new line can be added with the `Shift+Enter` combination.
## Feature overview
The `AutocompleteTextarea` extends the functionalities of the [`Textarea`](https://getstream.io/chat/docs/sdk/angular/v5/components/TextareaComponent/) component with autocomplete features:
- users can mention other users in a message (transliteration is used to support languages with non-Latin characters)
- users can send commands (for example /giphy)
## Basic usage
You can use the `AutocompleteTextarea` component if you want to create your own message input component to override the default one:
```typescript
@Component({
selector: "app-custom-message-input",
template: `
`,
})
export class CustomMessageInputComponent {
textareaValue = "";
mentionedUsers = [];
messageSent() {
// Send your message
}
}
```
## Customizations
### User mentions
- You can enable/disable user mentions using the [`MessageInputConfigService`](https://getstream.io/chat/docs/sdk/angular/v5/services/MessageInputConfigService/#arementionsenabled)
- You can set the mention scope (channel members or all users) using the [`MessageInputConfigService`](https://getstream.io/chat/docs/sdk/angular/v5/services/MessageInputConfigService/#mentionscope)
### Commands
- You can set available commands for [channel types](https://getstream.io/chat/docs/javascript/channel-features/)
- You can add [custom commands](https://getstream.io/chat/docs/node/custom-commands-webhook/)
### Custom autocompletes
You can create your own autocompletes (for example to add support for hashtags `#`). To do that you can follow the [custom autocompletes guide](https://getstream.io/chat/docs/sdk/angular/v5/code-examples/custom-autocompletes/).
### Custom component
For maximum flexibilty, you can create your [own textarea component](https://getstream.io/chat/docs/sdk/angular/v5/code-examples/custom-textarea/).
[//]: # "Start of generated content"
## Inputs and outputs
### value
**value**: `string` = `''`
The value of the input HTML element.
#### Implementation of
TextareaInterface.value
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49)
---
### placeholder
**placeholder**: `string` = `''`
Placeholder of the textarea
#### Implementation of
TextareaInterface.placeholder
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53)
---
### areMentionsEnabled
**areMentionsEnabled**: `undefined` \| `boolean` = `true`
If true, users can mention other users in messages. You can also set this input on the [`MessageInput`](https://getstream.io/chat/docs/sdk/angular/v5/components/MessageInputComponent/#inputs-and-outputs) component.
#### Implementation of
TextareaInterface.areMentionsEnabled
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57)
---
### inputMode
**inputMode**: `"mobile"` \| `"desktop"`
See [`MessageInputConfigService`](https://getstream.io/chat/docs/sdk/angular/v5/services/MessageInputConfigService) for more information
#### Implementation of
TextareaInterface.inputMode
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61)
---
### mentionScope
**mentionScope**: `"channel"` \| `"application"` = `'channel'`
The scope for user mentions, either members of the current channel of members of the application. You can also set this input on the [`MessageInput`](https://getstream.io/chat/docs/sdk/angular/v5/components/MessageInputComponent/#inputs-and-outputs) component.
#### Implementation of
TextareaInterface.mentionScope
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65)
---
### autoFocus
**autoFocus**: `boolean` = `true`
Enables or disables auto focus on the textarea element
#### Implementation of
TextareaInterface.autoFocus
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69)
---
### valueChange
`Readonly` **valueChange**: `EventEmitter`
Emits the current value of the input element when a user types.
#### Implementation of
TextareaInterface.valueChange
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73)
---
### send
`Readonly` **send**: `EventEmitter`
Emits when a user triggers a message send event (this happens when they hit the `Enter` key).
#### Implementation of
TextareaInterface.send
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77)
---
### userMentions
`Readonly` **userMentions**: `EventEmitter[]>`
Emits the array of users that are mentioned in the message, it is updated when a user mentions a new user or deletes a mention.
#### Implementation of
TextareaInterface.userMentions
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81)
---
### pasteFromClipboard
`Readonly` **pasteFromClipboard**: `EventEmitter`
Emits any paste event that occured inside the textarea
#### Implementation of
TextareaInterface.pasteFromClipboard
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:85](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L85)
[//]: # "End of generated content"
---
This page was last updated at 2026-08-07T20:37:39.738Z.
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/v5/components/AutocompleteTextareaComponent/](https://getstream.io/chat/docs/sdk/angular/v5/components/AutocompleteTextareaComponent/).