Templates in Angular Chat UI component

21 Jan 202520 minutes to read

The Chat UI component provides several templates for customizing the appearance of the empty conversation area, messages, typing indicator, and more. These templates provide flexibility for users to create a unique, personalized chat experience.

Empty chat template

You can use the emptyChatTemplate property to customize the chat interface when no messages are displayed. Personalized content, such as welcome messages or images, can be added to create an engaging and inviting experience for users starting a conversation.

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',
    templateUrl: './app.component.html'
})

export class AppComponent {
}

main.ts

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

app.component.html

<div id="chatui" ejs-chatui>
    <ng-template #emptyChatTemplate>
      <div class="empty-chat-text"><h4><span class="e-icons e-comment-show"></span></h4><h4>No Messages Yet</h4><p>Start a conversation to see your messages here.</p></div>
    </ng-template>
</div>

styles.css

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

Message template

You can use the messageTemplate property to customize the appearance and styling of each chat message. Modify text styling, layout, and other design elements to ensure a personalized chat experience. The template context includes message and index items.

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, MessageModel } from '@syncfusion/ej2-interactive-chat';
import { Component } from '@angular/core';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, ChatUIModule ],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent {
    public currentUserModel: UserModel = { user: 'Albert', id: 'user1' };
    public michaleUserModel: UserModel = { user: 'Michale Suyama', id: 'user2' };
    public chatMessages: MessageModel[] = [
        {
            author: this.currentUserModel,
            text: "Hi Michale, are we on track for the deadline?"
        },
        {
            author: this.michaleUserModel,
            text: "Yes, the design phase is complete."
        },
        {
            author: this.currentUserModel,
            text: "I’ll review it and send feedback by today."
        }
    ];
}

main.ts

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

app.component.html

<div id="messageTemplate" ejs-chatui [user]="currentUserModel" [messages]="chatMessages">
    <ng-template #messageTemplate let-data>
        <div class="message-items e-card">
            <div class="message-text"></div>
        </div>
    </ng-template>
</div>

styles.css

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

Time Break template

You can use the timeBreakTemplate property to customize the template, such as showing “Today,” “Yesterday,” or specific dates. This enhances conversation organization by clearly separating messages based on time, improving readability for the user. The template context includes messageDate.

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',
    templateUrl: './app.component.html'
})

export class AppComponent {
    public currentUserModel: UserModel = { user: 'Albert', id: 'user1' };
    public michaleUserModel: UserModel = { user: 'Michale Suyama', id: 'user2' };
    public timeStamp1: Date = new Date("December 25, 2024 7:30");
    public timeStamp2: Date = new Date("December 25, 2024 8:00");
    public timeStamp3: Date = new Date("December 25, 2024 11:00");
    public formatDate(context: any): string {
        const date: Date = new Date(context);
        const day: string = String(date.getDate()).padStart(2, '0');
        const month: string = String(date.getMonth() + 1).padStart(2, '0');
        const year: number = date.getFullYear();
        let hours: number = date.getHours();
        const minutes: string = String(date.getMinutes()).padStart(2, '0');
        const ampm: string = hours >= 12 ? 'PM' : 'AM';
        hours = hours % 12 || 12;
        const formattedDate: string = `${day}/${month}/${year} ${hours}:${minutes} ${ampm}`;
        return formattedDate;
    }
}

main.ts

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

app.component.html

<div id="timeBreakTemplate" ejs-chatui [user]="currentUserModel" [showTimeBreak]="true">
    <e-messages>
        <e-message text="Hi Michale, are we on track for the deadline?" [author]="currentUserModel" [timeStamp]="timeStamp1"></e-message>
        <e-message text="Yes, the design phase is complete." [author]="michaleUserModel" [timeStamp]="timeStamp2"></e-message>
        <e-message text="I’ll review it and send feedback by today." [author]="currentUserModel" [timeStamp]="timeStamp3"></e-message>
    </e-messages>
    <ng-template #timeBreakTemplate let-data>
      <div class="timebreak-wrapper">
        
      </div>
    </ng-template>
</div>

styles.css

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

Typing users template

You can use the typingUsersTemplate property to customize the display of users currently typing in the chat. It allows for styling and positioning of the typing indicator, enhancing the user experience. The template context includes users.

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',
    templateUrl: './app.component.html'
})

export class AppComponent {
    public currentUserModel: UserModel = { user: 'Albert', id: 'user1' };
    public michaleUserModel: UserModel = { user: 'Michale Suyama', id: 'user2' };
    public reenaUserModel: UserModel = { user: 'Reena', id: 'user3' };
    public typingUsers: UserModel[] = [this.michaleUserModel, this.reenaUserModel];
    public getUserTemplate(context: any): string {
        if (!context.users || context.users.length === 0) {
            return '';
        }
    
        const usersList = context.users.map((user: any, i: number) => {
            const isLastUser: boolean = i === context.users.length - 1;
            return `${isLastUser && i > 0 ? 'and ' : ''}<span class="typing-user">${user.user}</span>`;
        }).join(' ');
    
        return `
            <div class="typing-wrapper">
                ${usersList} are typing...
            </div>
        `;
    }
}

main.ts

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

app.component.html

<div id="typingUsersTemplate" ejs-chatui [user]="currentUserModel" [typingUsers]="typingUsers">
  <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>
  <ng-template #typingUsersTemplate let-data>
    <div [innerHTML] = 'getUserTemplate(data)'></div>
  </ng-template>
</div>

styles.css

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

Suggestion template

You can use the suggestionTemplate property to customize the quick reply suggestions that appear above the input field. Templates here can help create visually appealing and functional suggestion layouts. The template context includes suggestion and index items.

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',
    templateUrl: './app.component.html'
})

export class AppComponent {
    public currentUserModel: UserModel = { user: 'Albert', id: 'user1' };
    public michaleUserModel: UserModel = { user: 'Michale Suyama', id: 'user2' };
    public suggestions: string[] = [ "Okay will check it", "Sounds good!"];
}

main.ts

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

app.component.html

<div id="suggestionTemplate" ejs-chatui [user]="currentUserModel" [suggestions]="suggestions">
  <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-messages>
  <ng-template #suggestionTemplate let-data>
    <div class='suggestion-item active'>
      <div class="content"></div>
    </div>
  </ng-template>
</div>

styles.css

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

Footer template

You can use the footerTemplate property to customize the default footer area and manage message send actions with a personalized design. This flexibility allows users to create unique footers that meet their specific needs.

app.component.ts

import { NgModule, ViewChild } 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 } from '@angular/core';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, ChatUIModule ],
    standalone: true,
    selector: 'app-root',
    templateUrl: './app.component.html'
})

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 = () => {
        const textArea = document.getElementById('chatTextArea') as HTMLTextAreaElement;
        if (textArea && textArea.value.length > 0) {
          let value: string = textArea.value;
          textArea.value = '';
          this.chatUIComponent.addMessage(
            {
                author: this.michaleUserModel,
                text: value
            }
          );
        }
    };
}

main.ts

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

app.component.html

<div id="footerTemplate" #chatUIComponent ejs-chatui [user]="currentUserModel">
  <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>
  <ng-template #footerTemplate let-data>
    <div class="custom-footer">
      <input id="chatTextArea" class="e-input" placeholder="Type your message..."/>
      <button id="sendMessage" class="e-btn e-primary" (click)="buttonClick()"><span class="e-icons e-send-1"></span></button>
    </div>
  </ng-template>
</div>

styles.css

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}