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