Methods in Angular Chat UI component

17 Dec 202410 minutes to read

Adding message

You can use the addMessage public method to add the messages in the Chat UI. You can add it either as a string or MessageModel collection. It programmatically adds a new message to the chat.

The below sample demonstrates adding a new message as string and as 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));

Edit message

You can use the updateMessage public method to update the messages in the ChatUI to modify an existing message within the chat, useful for editing or correcting 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 bottom

You can use the scrollToBottom public method to scroll the chat view to the latest message, ensuring users see the new content updated.

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));