Sender

A input component for chat.
Import

When To Use#

Need to build an input box for a dialogue scenario.

Examples#

Basic usage. State management in controlled.

      Loading...
    

Enable the glowing border via nxGlowingBorder.

      Loading...
    

Control the newline and submit mode through nxSubmitType.

      Loading...
    
Upload Sample
Drag file here (just demo)
Support pdf, doc, xlsx, ppt, txt, image file types

Use nxHeader to customize the file upload example.

      Loading...
    
"Tell more about Ng Zorro X"

Use nxHeader to do the reference effect.

      Loading...
    
`Shift + Enter` to submit

Add nx-sender-extend-action attribute to the component to add custom action buttons (remain default buttons).

      Loading...
    

use nxActions to customize action buttons (will remove built-in action buttons).

      Loading...
    

Speech input requires user permission to access the microphone.

      Loading...
    

Customize the voice logic to achieve the voice recognition function of calling a third-party library.

      Loading...
    

API#

nx-sender#

PropertyDescriptionTypeDefault
[ngModel]Input value, supports two-way bindingstring-
[nxDisabled]Whether the input is disabledbooleanfalse
[nxLoading]Whether it is loadingbooleanfalse
[nxValue]Input valuestring-
[nxPlaceholder]Placeholder text for the inputstring-
[nxReadonly]Whether the input is read-onlybooleanfalse
[nxSubmitType]Keyboard submit mode, can be Enter or Shift+Enter'enter' | 'shiftEnter''enter'
[nxAllowSpeech]Whether to allow speech inputboolean | NxSpeechConfigfalse
[nxActions]Customize operation buttons. When no built-in button is needed, set nullTemplateRef | null -
[nxHeader]Header contentTemplateRef-
[nxFooter]Footer contentTemplateRef-
(nxSubmit)Callback when the send button is clickedEventEmitter<void>-
(nxCancel)Callback when the cancel button is clickedEventEmitter<void>-
(nxChange)Callback when the input value changesEventEmitter<string>-

[nx-sender-prefix]#

Use the nx-sender-prefix directive to customize prefix content.

[nx-sender-extend-action]#

Customize additional action buttons using the nx-sender-extend-action directive, which will be used in combination with built-in action buttons.

Here, 'nxActions' cannot be set to null, otherwise no action buttons will be displayed !

Interfaces#

interface NxSpeechConfig {
  // When setting `recording`, the built-in speech input function will be disabled.
  // It is up to the developer to implement the third-party speech input function.
  recording?: boolean;
  onRecordingChange?: (recording: boolean) => void;
}