diff --git a/apps/demos/Demos/Chat/Overview/Angular/app/app.component.html b/apps/demos/Demos/Chat/Overview/Angular/app/app.component.html
index 8376186cba0e..f6db19ac43cd 100644
--- a/apps/demos/Demos/Chat/Overview/Angular/app/app.component.html
+++ b/apps/demos/Demos/Chat/Overview/Angular/app/app.component.html
@@ -1,4 +1,8 @@
 <div class="demo-container">
-    <dx-chat [user]="currentUser" [items]="messages" width="760" height="810"></dx-chat>
-    <dx-chat [user]="supportAgent" [items]="messages" width="760" height="810"></dx-chat>
-</div>
+    <dx-chat [user]="currentUser" [items]="messages$ | async" [typingUsers]="userChatTypingUsers$ | async"
+        (onMessageEntered)="onMessageEntered($event)" (onTypingStart)="userChatOnTypingStart()"
+        (onTypingEnd)="userChatOnTypingEnd()" width="760" height="810"></dx-chat>
+    <dx-chat [user]="supportAgent" [items]="messages$ | async" [typingUsers]="supportChatTypingUsers$ | async"
+        (onMessageEntered)="onMessageEntered($event)" (onTypingStart)="supportChatOnTypingStart()"
+        (onTypingEnd)="supportChatOnTypingEnd()" width="760" height="810"></dx-chat>
+</div>
\ No newline at end of file
diff --git a/apps/demos/Demos/Chat/Overview/Angular/app/app.component.ts b/apps/demos/Demos/Chat/Overview/Angular/app/app.component.ts
index 085b517412eb..e4096d174a1e 100644
--- a/apps/demos/Demos/Chat/Overview/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Chat/Overview/Angular/app/app.component.ts
@@ -2,10 +2,10 @@ import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import notify from 'devextreme/ui/notify';
-
 import { DxChatModule } from 'devextreme-angular';
-import { User, Message } from 'devextreme/ui/chat';
+import { User, Message, MessageEnteredEvent } from 'devextreme/ui/chat';
+import { AppService } from './app.service';
+import { Observable } from 'rxjs';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -23,60 +23,39 @@ if (window && window.config.packageConfigPaths) {
   styleUrls: [`.${modulePrefix}/app.component.css`],
 })
 export class AppComponent {
-  date: Date = new Date();
+  currentUser: User;
+  supportAgent: User;
+  messages$: Observable<Message[]>;
+  userChatTypingUsers$: Observable<User[]>;
+  supportChatTypingUsers$: Observable<User[]>;
 
-  currentUser: User = {
-    id: "c94c0e76-fb49-4b9b-8f07-9f93ed93b4f3",
-    name: "John Doe",
-  };
+  constructor(private appService: AppService) {
+    [this.currentUser, this.supportAgent] = this.appService.getUsers();
+    this.messages$ = this.appService.messages$;
+    this.userChatTypingUsers$ = this.appService.userChatTypingUsers$;
+    this.supportChatTypingUsers$ = this.appService.supportChatTypingUsers$;
+  }
 
-  supportAgent: User = {
-    id: "d16d1a4c-5c67-4e20-b70e-2991c22747c3",
-    name: "Support Agent",
-    avatarUrl: "../../../../images/petersmith.png",
-  };
+  onMessageEntered(event: MessageEnteredEvent) {
+    this.appService.onMessageEntered(event);
+  }
 
-  messages: Message[] = [];
+  userChatOnTypingStart() {
+    this.appService.userChatOnTypingStart();
+  }
 
-  constructor() {
-    this.date.setHours(0, 0, 0, 0);
-    this.messages = [
-      {
-          timestamp: this.getTimestamp(this.date, -9),
-          author: this.supportAgent,
-          text: "Hello, John!\nHow can I assist you today?"
-      },
-      {
-          timestamp: this.getTimestamp(this.date, -7),
-          author: this.currentUser,
-          text: "Hi, I'm having trouble accessing my account."
-      },
-      {
-          timestamp: this.getTimestamp(this.date, -7),
-          author: this.currentUser,
-          text: "It says my password is incorrect."
-      },
-      {
-          timestamp: this.getTimestamp(this.date, -7),
-          author: this.supportAgent,
-          text: "I can help with that. Can you please confirm your UserID for security purposes?"
-      },
-      {
-          timestamp: this.getTimestamp(this.date, 1),
-          author: this.currentUser,
-          text: "john.doe1357"
-      },
-      {
-          timestamp: this.getTimestamp(this.date, 1),
-          author: this.supportAgent,
-          text: "✅ Instructions to restore access have been sent to the email address registered to your account."
-      },
-    ];
+  userChatOnTypingEnd() {
+    this.appService.userChatOnTypingEnd();
   }
 
-  getTimestamp(date: Date, offsetMinutes: number = 0): number {
-    return date.getTime() + offsetMinutes * 60000;
+  supportChatOnTypingStart() {
+    this.appService.supportChatOnTypingStart();
   }
+
+  supportChatOnTypingEnd() {
+    this.appService.supportChatOnTypingEnd();
+  }
+
 }
 
 @NgModule({
@@ -86,6 +65,7 @@ export class AppComponent {
   ],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
+  providers: [AppService],
 })
 export class AppModule { }
 
diff --git a/apps/demos/Demos/Chat/Overview/Angular/app/app.service.ts b/apps/demos/Demos/Chat/Overview/Angular/app/app.service.ts
new file mode 100644
index 000000000000..7c27af487c2d
--- /dev/null
+++ b/apps/demos/Demos/Chat/Overview/Angular/app/app.service.ts
@@ -0,0 +1,112 @@
+import { Injectable } from '@angular/core';
+import { Observable, BehaviorSubject } from 'rxjs';
+
+import { User, Message, MessageEnteredEvent } from 'devextreme/ui/chat';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class AppService {
+    date: Date;
+
+    currentUser: User = {
+        id: 'c94c0e76-fb49-4b9b-8f07-9f93ed93b4f3',
+        name: 'John Doe',
+    };
+
+    supportAgent: User = {
+        id: 'd16d1a4c-5c67-4e20-b70e-2991c22747c3',
+        name: 'Support Agent',
+        avatarUrl: '../../../../images/petersmith.png',
+    };
+
+    messages: Message[] = [];
+
+    userChatTypingUsersSubject: BehaviorSubject<User[]> = new BehaviorSubject([]);
+    supportChatTypingUsersSubject: BehaviorSubject<User[]> = new BehaviorSubject([]);
+
+    messagesSubject: BehaviorSubject<Message[]> = new BehaviorSubject([]);
+
+    constructor() {
+        this.date = new Date();
+        this.date.setHours(0, 0, 0, 0);
+
+        this.messages = [
+            {
+                timestamp: this.getTimestamp(this.date, -9),
+                author: this.supportAgent,
+                text: 'Hello, John!\nHow can I assist you today?'
+            },
+            {
+                timestamp: this.getTimestamp(this.date, -7),
+                author: this.currentUser,
+                text: 'Hi, I\'m having trouble accessing my account.'
+            },
+            {
+                timestamp: this.getTimestamp(this.date, -7),
+                author: this.currentUser,
+                text: 'It says my password is incorrect.'
+            },
+            {
+                timestamp: this.getTimestamp(this.date, -7),
+                author: this.supportAgent,
+                text: 'I can help with that. Can you please confirm your UserID for security purposes?'
+            },
+            {
+                timestamp: this.getTimestamp(this.date, 1),
+                author: this.currentUser,
+                text: 'john.doe1357'
+            },
+            {
+                timestamp: this.getTimestamp(this.date, 1),
+                author: this.supportAgent,
+                text: '✅ Instructions to restore access have been sent to the email address registered to your account.'
+            },
+        ];
+
+        this.messagesSubject.next(this.messages);
+        this.userChatTypingUsersSubject.next([]);
+        this.supportChatTypingUsersSubject.next([]);
+    }
+
+    get userChatTypingUsers$(): Observable<User[]> {
+        return this.userChatTypingUsersSubject.asObservable();
+    }
+
+    get supportChatTypingUsers$(): Observable<Message[]> {
+        return this.supportChatTypingUsersSubject.asObservable();
+    }
+
+    get messages$(): Observable<Message[]> {
+        return this.messagesSubject.asObservable();
+    }
+
+    getUsers(): User[] {
+        return [this.currentUser, this.supportAgent];
+    }
+
+    getTimestamp(date: Date, offsetMinutes: number = 0): number {
+        return date.getTime() + offsetMinutes * 60000;
+    }
+
+    onMessageEntered(event: MessageEnteredEvent) {
+        this.messages = [...this.messages, event.message];
+        this.messagesSubject.next(this.messages);
+    }
+
+    userChatOnTypingStart() {
+        this.supportChatTypingUsersSubject.next([this.supportAgent]);
+    }
+
+    userChatOnTypingEnd() {
+        this.supportChatTypingUsersSubject.next([]);
+    }
+
+    supportChatOnTypingStart() {
+        this.userChatTypingUsersSubject.next([this.currentUser]);
+    }
+
+    supportChatOnTypingEnd() {
+        this.userChatTypingUsersSubject.next([]);
+    }
+}