Methods in Angular Chat UI component

23 Aug 202510 minutes to read

Add message

The addMessage method programmatically adds a new message to the chat. You can provide the new message as either a string or a MessageModel object.

The following sample demonstrates how to add a new message using both a string and a MessageModel object.

Here is an example of how to use the addMessage method:

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


@Component({
    imports: [ FormsModule, ReactiveFormsModule, ChatUIModule ],
    standalone: true,
    selector: 'app-root',
    template: `<button id="addMessageModel" style="margin-bottom: 10px" class="e-btn e-primary" (click)="buttonClick()">Add Message as string</button>
        <div id="chatui" ejs-chatui #chatUIComponent [user]="currentUserModel" height="360px">
        <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 {
    @ViewChild('chatUIComponent')
    public chatUIComponent!: ChatUIComponent;

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

    public buttonClick = () => {
        this.chatUIComponent.addMessage("Also, let me know if there are any blockers we should address before the next phase.");
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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


@Component({
    imports: [ FormsModule, ReactiveFormsModule, ChatUIModule ],
    standalone: true,
    selector: 'app-root',
    template: `<button id="addMessageModel" style="margin-bottom: 10px" class="e-btn e-primary" (click)="buttonClick()">Add Message as Object</button>
        <div id="chatui" ejs-chatui #chatUIComponent [user]="currentUserModel" height="360px">
        <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 {
    @ViewChild('chatUIComponent')
    public chatUIComponent!: ChatUIComponent;

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

    public buttonClick = () => {
        this.chatUIComponent.addMessage({
            author: this.michaleUserModel,
            text: "Great! Let me know if there’s anything that needs adjustment."
        });
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Update message

The updateMessage method modifies an existing message in the Chat UI, which is useful for editing or correcting previously sent messages.

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


@Component({
    imports: [ FormsModule, ReactiveFormsModule, ChatUIModule ],
    standalone: true,
    selector: 'app-root',
    template: `<button id="updateMessage" style="margin-bottom: 10px" class="e-btn e-primary" (click)="buttonClick()">Update Message</button>
        <div id="chatui" ejs-chatui #chatUIComponent [user]="currentUserModel" height="360px">
        <e-messages>
            <e-message text="Hi Michale, are we on track for the deadline?" [author]="currentUserModel" id="msg1"></e-message>
            <e-message text="Yes, the design phase is complete." [author]="michaleUserModel" id="msg2"></e-message>
            <e-message text="I’ll review it and send feedback by today." [author]="currentUserModel" id="msg3"></e-message>
        </e-messages>
    </div>`
})

export class AppComponent {
    @ViewChild('chatUIComponent')
    public chatUIComponent!: ChatUIComponent;

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

    public buttonClick = () => {
        this.chatUIComponent.updateMessage({text: "Hi Michael, are we still on schedule to meet the deadline?", author: this.currentUserModel}, 'msg1');
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Scroll to the bottom

The scrollToBottom method scrolls the chat view to the most recent message, ensuring that the latest content is visible to the user.

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


@Component({
    imports: [ FormsModule, ReactiveFormsModule, ChatUIModule ],
    standalone: true,
    selector: 'app-root',
    template: `<button id="scrollToBottom" style="margin-bottom: 10px" class="e-btn e-primary" (click)="buttonClick()">Scroll to bottom</button>
        <div id="chatui" ejs-chatui #chatUIComponent [user]="currentUserModel" height="360px">
        <e-messages>
            <e-message text="Want to get coffee tomorrow?" [author]="currentUserModel"></e-message>
            <e-message text="Sure! What time?" [author]="michaleUserModel"></e-message>
            <e-message text="How about 10 AM?" [author]="currentUserModel"></e-message>
            <e-message text="Perfect" [author]="michaleUserModel"></e-message>
            <e-message text="See you!" [author]="currentUserModel"></e-message>
            <e-message text="Bye!" [author]="michaleUserModel"></e-message>
        </e-messages>
    </div>`
})

export class AppComponent {
    @ViewChild('chatUIComponent')
    public chatUIComponent!: ChatUIComponent;

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

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