TextareaComponent
The Textarea
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.
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
lib/message-input/textarea/textarea.component.ts:35
placeholder
• placeholder: string
= ''
Placeholder of the textarea
Implementation of
TextareaInterface.placeholder
Defined in
lib/message-input/textarea/textarea.component.ts:39
inputMode
• inputMode: "desktop"
| "mobile"
See MessageInputConfigService
for more information
Implementation of
TextareaInterface.inputMode
Defined in
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
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
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