Angular wrapper component for the Ignite UI Web Components Chat component.
This component provides an Angular-friendly interface to the igc-chat web component, including support for Angular templates, signals, and change detection.
Uses OnPush change detection strategy for optimal performance. All inputs are signals, so changes are automatically tracked and propagated to the underlying web component.
Example
<igx-chat
[messages]="messages"
[draftMessage]="draft"
[options]="chatOptions"
[templates]="chatTemplates"
(messageCreated)="onMessageCreated($event)"
/>Constructors
Section titled "Constructors"IgxChatComponent
new IgxChatComponent(): IgxChatComponentDefined in projects/igniteui-angular/chat/src/chat.component.ts:189
Returns IgxChatComponent
Properties
Section titled "Properties"attachmentClick
Section titled "attachmentClick"Emitted when an attachment is clicked
attachmentClick: OutputEmitterRef<IgcChatMessageAttachment>Defined in projects/igniteui-angular/chat/src/chat.component.ts:154
attachmentDrag
Section titled "attachmentDrag"Emitted when attachment drag starts
attachmentDrag: OutputEmitterRef<void>Defined in projects/igniteui-angular/chat/src/chat.component.ts:157
attachmentDrop
Section titled "attachmentDrop"Emitted when attachment is dropped
attachmentDrop: OutputEmitterRef<void>Defined in projects/igniteui-angular/chat/src/chat.component.ts:160
draftMessage
Section titled "draftMessage"Draft message with text and optional attachments
draftMessage: InputSignal<object | undefined>Defined in projects/igniteui-angular/chat/src/chat.component.ts:133
inputBlur
Section titled "inputBlur"Emitted when the input loses focus
inputBlur: OutputEmitterRef<void>Defined in projects/igniteui-angular/chat/src/chat.component.ts:169
inputChange
Section titled "inputChange"Emitted when the input value changes
inputChange: OutputEmitterRef<string>Defined in projects/igniteui-angular/chat/src/chat.component.ts:172
inputFocus
Section titled "inputFocus"Emitted when the input receives focus
inputFocus: OutputEmitterRef<void>Defined in projects/igniteui-angular/chat/src/chat.component.ts:166
messageCreated
Section titled "messageCreated"Emitted when a new message is created
messageCreated: OutputEmitterRef<IgcChatMessage>Defined in projects/igniteui-angular/chat/src/chat.component.ts:148
messageReact
Section titled "messageReact"Emitted when a user reacts to a message
messageReact: OutputEmitterRef<IgcChatMessageReaction>Defined in projects/igniteui-angular/chat/src/chat.component.ts:151
messages
Section titled "messages"Array of chat messages to display
messages: InputSignal<IgcChatMessage[]>Defined in projects/igniteui-angular/chat/src/chat.component.ts:130
options
Section titled "options"Configuration options for the chat component
options: InputSignal<IgxChatOptions>Defined in projects/igniteui-angular/chat/src/chat.component.ts:138
templates
Section titled "templates"Custom templates for rendering chat elements
templates: InputSignal<IgxChatTemplates>Defined in projects/igniteui-angular/chat/src/chat.component.ts:141
typingChange
Section titled "typingChange"Emitted when typing indicator state changes
typingChange: OutputEmitterRef<boolean>Defined in projects/igniteui-angular/chat/src/chat.component.ts:163
Methods
Section titled "Methods"ngOnDestroy
Section titled "ngOnDestroy"ngOnDestroy(): voidDefined in projects/igniteui-angular/chat/src/chat.component.ts:182
Returns void
ngOnInit
Section titled "ngOnInit"ngOnInit(): voidDefined in projects/igniteui-angular/chat/src/chat.component.ts:177