Events in Angular Chat UI component

22 Aug 20256 minutes to read

This section describes the events that the Chat UI component triggers when specific actions are performed. The following events are available:

created

The Chat UI component triggers the created event after the component has been rendered. This event is useful for performing actions once the Chat UI is fully initialized and ready for interaction.

app.component.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ChatUIModule } from '@syncfusion/ej2-angular-interactive-chat';
import { UserModel } from '@syncfusion/ej2-interactive-chat';

import { Component } from '@angular/core';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, ChatUIModule ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the Chat UI component
    template: `<div id="chatui" ejs-chatui [user]="currentUserModel" (created)="onCreated()">
        <e-messages>
            <e-message text="Hi Michale, are we on track for the deadline?" [author]="currentUserModel" ></e-message>
            <e-message text="Yes, the design phase is complete." [author]="michaleUserModel"></e-message>
            <e-message text="I’ll review it and send feedback by today." [author]="currentUserModel"></e-message>
        </e-messages>
    </div>`
})

export class AppComponent {
    public currentUserModel: UserModel = { user: 'Albert', id: 'user1' };
    public michaleUserModel: UserModel = { user: 'Michale Suyama', id: 'user2' };

    public onCreated = () => {
        // Your required action here
    };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

messageSend

The messageSend event is triggered before a message is sent from the Chat UI component.

app.component.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ChatUIModule } from '@syncfusion/ej2-angular-interactive-chat';
import { UserModel, MessageSendEventArgs } from '@syncfusion/ej2-interactive-chat';

import { Component } from '@angular/core';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, ChatUIModule ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the Chat UI component
    template: `<div id="chatui" ejs-chatui [user]="currentUserModel" (messageSend)="onMessageSend($event)">
        <e-messages>
            <e-message text="Hi Michale, are we on track for the deadline?" [author]="currentUserModel"></e-message>
            <e-message text="Yes, the design phase is complete." [author]="michaleUserModel"></e-message>
            <e-message text="I’ll review it and send feedback by today." [author]="currentUserModel"></e-message>
        </e-messages>
    </div>`
})

export class AppComponent {
    public currentUserModel: UserModel = { user: 'Albert', id: 'user1' };
    public michaleUserModel: UserModel = { user: 'Michale Suyama', id: 'user2' };

    public onMessageSend = (args: MessageSendEventArgs) => {
        // Your required action here
    };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

userTyping

The userTyping event is triggered as a user types a message in the Chat UI input field. This is useful for implementing features like typing indicators (“User is typing…”).

app.component.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ChatUIModule } from '@syncfusion/ej2-angular-interactive-chat';
import { UserModel, TypingEventArgs } from '@syncfusion/ej2-interactive-chat';

import { Component } from '@angular/core';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, ChatUIModule ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the Chat UI component
    template: `<div id="chatui" ejs-chatui [user]="currentUserModel" (userTyping)="onTyping($event)">
        <e-messages>
            <e-message text="Hi Michale, are we on track for the deadline?" [author]="currentUserModel"></e-message>
            <e-message text="Yes, the design phase is complete." [author]="michaleUserModel"></e-message>
            <e-message text="I’ll review it and send feedback by today." [author]="currentUserModel"></e-message>
        </e-messages>
    </div>`
})

export class AppComponent {
    public currentUserModel: UserModel = { user: 'Albert', id: 'user1' };
    public michaleUserModel: UserModel = { user: 'Michale Suyama', id: 'user2' };

    public onTyping = (args: TypingEventArgs) => {
        // Your required action here
    };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));