Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class IgxChatComponent

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.

<igx-chat
  [messages]="messages"
  [draftMessage]="draft"
  [options]="chatOptions"
  [templates]="chatTemplates"
  (messageCreated)="onMessageCreated($event)"
/>

Implements

  • OnInit
  • OnDestroy

Constructors

Properties

Methods

Constructors

Properties

attachmentClick: OutputEmitterRef<IgcChatMessageAttachment> = ...

Emitted when an attachment is clicked

attachmentDrag: OutputEmitterRef<void> = ...

Emitted when attachment drag starts

attachmentDrop: OutputEmitterRef<void> = ...

Emitted when attachment is dropped

draftMessage: InputSignal<{ attachments?: IgcChatMessageAttachment[]; text: string }> = ...

Draft message with text and optional attachments

inputBlur: OutputEmitterRef<void> = ...

Emitted when the input loses focus

inputChange: OutputEmitterRef<string> = ...

Emitted when the input value changes

inputFocus: OutputEmitterRef<void> = ...

Emitted when the input receives focus

messageCreated: OutputEmitterRef<IgcChatMessage> = ...

Emitted when a new message is created

messageReact: OutputEmitterRef<IgcChatMessageReaction> = ...

Emitted when a user reacts to a message

messages: InputSignal<IgcChatMessage[]> = ...

Array of chat messages to display

options: InputSignal<IgxChatOptions> = ...

Configuration options for the chat component

templates: InputSignal<IgxChatTemplates> = ...

Custom templates for rendering chat elements

typingChange: OutputEmitterRef<boolean> = ...

Emitted when typing indicator state changes

Methods