Add an animated typing indicator to your Angular chat app

Verbal communication is an essential part of human life. Today, technology brings the possibility of much richer communication channel then standard text-chat to our browsers. With CometChat you can build your audio and Video chat application on your website. Today you will integrate CometChat with Angular application.

There is a companion repository created for this post, available on the GitHub.

‍

Getting started

First things first. In the catalog where you want your project to be located, type in the following Angular CLI command, which creates Angular project boilerplate:

And install @cometchat-pro/chat library from npm:

Customize the global stylesheet by editing src/styles.scss file and place there following content:

Now navigate into just created file, and replace the content of the src/app/app.component.html file with following HTML syntax:

Add some styling to the src/app/app.component.scss file:

Now it’s time to store your application ID and API Key in the environments/environment.ts file:

The application is going to have two main components: LoginComponent and ChatComponent.

ChatComponent is the place where a logged in user will be brought to display a group chat window. If the user is not authenticated, he needs to provide login and password in the LoginComponent. Information about user authentication will be provided by the CometChatService. Generate them using the following commands:

Let’s start from the implementation of the CometChatService functionalities. Replace the content of the src/app/comet-chat.service.ts file with the following code:

With this basic functionality of the CometChatService (authenticating user and checking if he is authenticated) we can build up an AuthenticationGuard to protect the ChatComponent against unauthorized access. Generate the AuthenticationGuard:

Now, you can implement the Authentication Guard which will check if user is authenticated every time he is trying to navigate into the application. Replace the content of the src/app/auth.guard.ts file with following code:

Now it’s more than ready to use it in the app navigation. Place following content in the src/app/app-routing.module.ts:

Ok, let’s give the user ability to login. Paste following code representing login form, to the src/login/login.component.ts file:

And following HTML template in the src/app/login/login.component.html

You can also add some styling, to make it prettier. Paste following CSS into src/app/login/login.component.scss

The last thing to do in this step is to add a new import to the src/app/app.module.ts, in the imports array add ReactiveFormsModule, imported from the @angular/forms library:

Now, after navigating to the localhost:4200, the login page should be displayed:

If you haven't been coding along and want to catch up to this step using the companion repository on GitHub, execute the following commands:

Implementing the chat functionality

Let’s start the implementation of the main functionality. First thing first, add a new fields to the src/app/comet-chat.service.ts:

Remember to add BehaviorSubject to the import statement from the rxjs library.

It’s time to add some CometChat listeners. We will do that at the moment when user is logging into the application. Replace the login method with following new implementation:

Implement methods which will be responsible for sending message to the group and retrieve messages in the component. For the purpose of that method you will use the CometChat library:

Add also methods which will initialize typing, finish typing and publish to the component list of actually typing users:

Now you can consume the new implementation of the CometChatService in the ChatComponent and nested components. Replace the code inside src/app/chat/chat.component.ts with the following code:

Adjust the template, in the src/app/chat/chat.component.html:

And add some styles in the src/app/chat/chat.component.scss:

As you can see, we introduced two new components MessageBoxComponent and ChatWindowComponent. Generate them with the CLI by using following command:

Start from implementing the MessageBoxComponent it would be responsible for sending typed message to the supergroup of superheroes. Replace the code inside src/app/message-box/message-box.component.ts with following

Whenever user will type something into the form described here, the startTyping method on the CometChatService will be fired and inform other users that something is going on.

Create template in src/app/message-box/message-box.component.html:

And add styling to the src/app/message-box/message-box.component.scss:

Now add the last piece to our puzzles. Edit content of the src/app/chat-window.component.ts and place following code inside:

Couple things went on here. First of all, you are retrieving the Observable with information about who is typing from the CometChatService ; later, basing on the number of typing users you are creating a new observable called who - that’s what you are going to display in the template. Last but not least observable is messages which is stream of messages sent by you and other users. For purpose of scrolling the chat window to the recent messages you are going to use conversationContainer the JavaScript scrollTop method is used inside the ngOnInit method (an Angular lifecycle hook).

Implement template which uses all of those methods and variables. Change content of the src/app/chat-window.component.html to the following:

And finally, make the final touch by adjusting css in the src/app/chat-window.component.scss:

Now, after navigating to localhost:4200 in two separate windows, authorizing into two different accounts, you should be able to perform a real-life test of the typing indicator:

If you haven't been coding along and want to catch up to this step using the companion repository on GitHub, execute the following commands in the directory where you’d like to create the project:

Conclusion

Today you brought one of the most important part of human communication - voice and view - to the web! You learned how to embed CometChat in an Angular application.

Team CometChat

We build chat and messaging SDKs that let you quickly code a full-featured chat experience into any mobile or web app.