Appearance in Angular Chat UI component

17 Dec 20248 minutes to read

Setting placeholder

You can use the placeholder property to display the placeholder text that appears in the message input field to guide users on what to type. The default is Type your message….

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" [placeholder]="placeholder">
        <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 placeholder: string = 'Start typing...';
    public currentUserModel: UserModel = { user: 'Albert', id: 'user1' };
    public michaleUserModel: UserModel = { user: 'Michale Suyama', id: 'user2' };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Setting width

You can use the width property to specify the dimensions of the Chat UI within the application layout. By default, the value is 100%.

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" width="450px">
        <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' };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Setting height

You can use the height property to specify the dimensions of the Chat UI within the application layout. By default, the value is 100%.

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" height="380px">
        <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' };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Setting CSS Class

You can use the cssClass property to customize the appearance of the chat UI component.

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" cssClass="custom-container">
        <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' };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}