AutocompleteTextareaComponent
The AutocompleteTextarea
component is used by the MessageInput
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.
The AutocompleteTextarea
extends the functionalities of the Textarea
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 usageYou can use the AutocompleteTextarea
component if you want to create your own message input component to override the default one:
@Component({
selector: "app-custom-message-input",
template: `
<stream-autocomplete-textarea
[(value)]="textareaValue"
(send)="messageSent()"
(userMentions)="mentionedUsers = $event"
></stream-autocomplete-textarea>
<!-- Other parts of the custom message input component -->
`,
})
export class CustomMessageInputComponent {
textareaValue = "";
mentionedUsers = [];
messageSent() {
// Send your message
}
}
#
Inputs and outputs#
value• value: string
= ''
The value of the input HTML element.
#
Implementation ofTextareaInterface.value
#
Defined inlib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:48
#
placeholder• placeholder: string
= ''
Placeholder of the textarea
#
Implementation ofTextareaInterface.placeholder
#
Defined inlib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:52
#
areMentionsEnabled• areMentionsEnabled: undefined
| boolean
= true
If true, users can mention other users in messages. You can also set this input on the MessageInput
component.
#
Implementation ofTextareaInterface.areMentionsEnabled
#
Defined inlib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:56
#
inputMode• inputMode: "desktop"
| "mobile"
See MessageInputConfigService
for more information
#
Implementation ofTextareaInterface.inputMode
#
Defined inlib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:60
#
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
component.
#
Implementation ofTextareaInterface.mentionScope
#
Defined inlib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:64
#
valueChange• Readonly
valueChange: EventEmitter
<string
>
Emits the current value of the input element when a user types.
#
Implementation ofTextareaInterface.valueChange
#
Defined inlib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:68
#
send• Readonly
send: EventEmitter
<void
>
Emits when a user triggers a message send event (this happens when they hit the Enter
key).
#
Implementation ofTextareaInterface.send
#
Defined inlib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:72
#
userMentions• Readonly
userMentions: EventEmitter
<UserResponse
<DefaultGenerics
>[]>
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 ofTextareaInterface.userMentions
#
Defined inlib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:76