Skip to main content
Version: v4

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.

Feature overview​

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 usage​

You 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 of​

TextareaInterface.value

Defined in​

lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49

placeholder​

• placeholder: string = ''

Placeholder of the textarea

Implementation of​

TextareaInterface.placeholder

Defined in​

lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53

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 of​

TextareaInterface.areMentionsEnabled

Defined in​

lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57

inputMode​

• inputMode: "desktop" | "mobile"

See MessageInputConfigService for more information

Implementation of​

TextareaInterface.inputMode

Defined in​

lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61

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 of​

TextareaInterface.mentionScope

Defined in​

lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65

autoFocus​

• autoFocus: boolean = true

Enables or disables auto focus on the textarea element

Implementation of​

TextareaInterface.autoFocus

Defined in​

lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69

valueChange​

• Readonly valueChange: EventEmitter<string>

Emits the current value of the input element when a user types.

Implementation of​

TextareaInterface.valueChange

Defined in​

lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73

send​

• Readonly send: EventEmitter<void>

Emits when a user triggers a message send event (this happens when they hit the Enter key).

Implementation of​

TextareaInterface.send

Defined in​

lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77

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 of​

TextareaInterface.userMentions

Defined in​

lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81

Did you find this page helpful?