TextareaComponent

The Textarea component is used by the MessageInput component to display the input HTML element where users can type their message.

Feature overview

• Message send can be triggered with the Enter key, new line can be added with the Shift+Enter combination
• The textarea will automatically grow with the text
• The textarea will automatically insert emojis from the emoji picker

If you want to enable autocomplete features, you can use the AutcompleteTextarea component instead of this one.

Basic usage

You can use the Textarea component if you want to create your own message input component to override the default one:

@Component({
  selector: "app-custom-message-input",
  template: `
    <stream-textarea
      [(value)]="textareaValue"
      (send)="messageSent()"
    ></stream-textarea>
    <!-- Other parts of the custom message input component -->
  `,
})
export class CustomMessageInputComponent {
  textareaValue = "";

  messageSent() {
    // Send your message
  }
}

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/textarea/textarea.component.ts:35

placeholder

placeholder: string = ''

Placeholder of the textarea

Implementation of

TextareaInterface.placeholder

Defined in

projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:39

inputMode

inputMode: "mobile" | "desktop"

See MessageInputConfigService for more information

Implementation of

TextareaInterface.inputMode

Defined in

projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:43

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/textarea/textarea.component.ts:47

valueChange

Readonly valueChange: EventEmitter<string>

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/textarea/textarea.component.ts:51

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

projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:55

pasteFromClipboard

Readonly pasteFromClipboard: EventEmitter<ClipboardEvent>

Emits any paste event that occured inside the textarea

Implementation of

TextareaInterface.pasteFromClipboard

Defined in

projects/stream-chat-angular/src/lib/message-input/textarea/textarea.component.ts:59