ListView can be customizable as chat window. To achieve that, use ListView template property and Avatar component.
* Listview template property is used to showcase the ListView as chat window.
* Avatar component is used to design the image of contact person.
Refer the below template code snippet for Template of chat window.
<ng-template #template let-data="">
<div class="settings" *ngIf="data.chat!='receiver' then senderTemplate else receiverTemplate "></div>
<ng-template #senderTemplate>
<div id="content">
<div class="name">{{data.text}}</div>
<div id="info">{{data.contact}}</div>
</div>
<div id="image" *ngIf="data.avatar!=''"><span class="e-avatar img1 e-avatar-circle">{{data.avatar}}</span></div>
<div id="image" *ngIf="data.avatar==''"><span class="{{data.pic}} img1 e-avatar e-avatar-circle"> </span></div>
</ng-template>
<ng-template #receiverTemplate>
<div id="image2" *ngIf="data.avatar!=''"><span class="e-avatar img2 e-avatar-circle">{{data.avatar}}</span></div>
<div id="image2" *ngIf="data.avatar==''"><span class="{{data.pic}} img2 e-avatar e-avatar-circle"> </span></div>
<div id="content1">
<div class="name1">{{data.text}}</div>
<div id="info1">{{data.contact}}</div>
</div>
</ng-template>
</ng-template>
In ListView template, we have rendered the list items based on receiver and sender information from dataSource of listview.
* Use textbox to get message from user.
* Add the textbox message to ListView dataSource using [addItem](../../api/listview#additem) method.
public btnClick() {
let value = this.textboxEle.nativeElement.value;
this.listObj.addItem([{ text: "Amenda", contact: value, id: "2", avatar: "A", pic: "", chat: "receiver" }]);
this.textboxEle.nativeElement.value = "";
}
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<ejs-listview id='List' #list [dataSource]='data' headerTitle="Chat" showHeader="true" width="350px" [fields]='fields'>
<ng-template #template let-data="">
<div class="settings" *ngIf="data.chat!='receiver' then senderTemplate else receiverTemplate "></div>
<ng-template #senderTemplate>
<div id="content">
<div class="name">{{data.text}}</div>
<div id="info">{{data.contact}}</div>
</div>
<div id="image" *ngIf="data.avatar!=''"><span class="e-avatar img1 e-avatar-circle">{{data.avatar}}</span></div>
<div id="image" *ngIf="data.avatar==''"><span class="{{data.pic}} img1 e-avatar e-avatar-circle"> </span></div>
</ng-template>
<ng-template #receiverTemplate>
<div id="image2" *ngIf="data.avatar!=''"><span class="e-avatar img2 e-avatar-circle">{{data.avatar}}</span></div>
<div id="image2" *ngIf="data.avatar==''"><span class="{{data.pic}} img2 e-avatar e-avatar-circle"> </span></div>
<div id="content1">
<div class="name1">{{data.text}}</div>
<div id="info1">{{data.contact}}</div>
</div>
</ng-template>
</ng-template>
</ejs-listview>
<div style="width: 350px;margin: 0 auto;"><input #textbox id="name" style="width: 275px" class="e-input" type="text" placeholder="Type your message" />
<button ejs-button id="btn" style="float:right" (click)="btnClick()">Send</button> </div>
`,
})
export class AppComponent {
@ViewChild('list') listObj: any;
@ViewChild('textbox') textboxEle: any;
public data: Object[] = [
{
text: "Jenifer",
contact: "Hi",
id: "1",
avatar: "",
pic: "pic01", chat: "sender"
},
{ text: "Amenda", contact: "Hello", id: "2", avatar: "A", pic: "", chat: "receiver" },
{
text: "Jenifer",
contact: "What Knid of application going to launch",
id: "4",
avatar: "",
pic: "pic02", chat: "sender"
},
{
text: "Amenda ",
contact: "A knid of Emergency broadcast App",
id: "5",
avatar: "A",
pic: "", chat: "receiver"
},
{
text: "Jacob",
contact: "Can you please elaborate",
id: "6",
avatar: "",
pic: "pic04", chat: "sender"
},
];
public fields = { text: "Name" };
public btnClick() {
let value = this.textboxEle.nativeElement.value;
this.listObj.addItem([{ text: "Amenda", contact: value, id: "2", avatar: "A", pic: "", chat: "receiver" }]);
this.textboxEle.nativeElement.value = "";
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ListViewModule } from '@syncfusion/ej2-angular-lists';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ListViewModule, ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
top: 45%;
left: 45%;
}
#List {
margin: 0 auto;
border: 1px solid #ccc;
}
#List .e-list-item {
height: auto;
cursor: pointer;
}
#List .e-list-header .e-text {
font-family: sans-serif;
font-size: 18px;
line-height: 26px;
}
#List #info,
#List .name {
font-size: 11px;
line-height: 20px;
}
#List .name {
padding-top: 3px;
font-weight: 500;
padding-left:150px;
}
#List #info {
float: right;
margin-right:10px;
}
.pic01 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/1.png");
}
.pic02 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/3.png");
}
.pic03 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/5.png");
}
.pic04 {
background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/2.png");
}
/* csslint ignore:start */
.img2 {
margin-left: 10px;
margin-top: 7px !important;
font-size: 13px;
}
#List #content1 {
width: 200px;
background-color: aliceblue;
display: inline-block;
margin: 5px;
}
#List #info1,
#List .name1 {
font-size: 11px;
line-height: 20px;
margin-left: 10px;
}
#List .name1 {
padding-top: 3px;
font-weight: 500;
}
#List #content {
margin: 5px;
width: 200px;
margin-left: 87px;
background-color: aliceblue;
display:inline-block
}
#image {
float: right;
display: inline-block;
}
#image2 {
float: left;
display: inline-block;
}
.img1 {
margin-right: 10px;
margin: 5px;
font-size: 13px;
}
.e-listview .e-list-item {
padding: 0px !important;
}
.e-listview .e-list-header{
color: white !important;
}
.e-listview .e-list-header{
background: rgb(2, 120, 215) !important;
}
#List .e-hover {
background-color: transparent;
}
/* csslint ignore:end */