App and web development have come a long way over the last few years. We use a lot of chat/meeting apps every day. In this tutorial, we are going to build a 1-on-1 chat app in Angular using the CometChat SDK and Firebase backend services. Moreover, the CometChat Angular UI Kit has made the process of integrating communication features in your app a lot simpler.
To follow this tutorial, you must have at least a rudimentary understanding of the operations of the Angular framework. This will help you to speedily comprehend this educational material.
Download the Kit by clicking on the first purple button with “Angular UI Kit”.
Extract the folder within the downloaded zipped file and rename to "cometchat-pro-angular-ui-kit”.
Copy or cut the folder to your src directory within your project.
Head on to angular.json file and paste the following code in the styles block. "node_modules/@ctrl/ngx-emoji-mart/picker.css", "src/cometchat-pro-angular-ui-kit/CometChatWorkspace/projects/angular-chat-ui-kit/src/css/styles.scss", "src/styles.css"
Head to console and run this code below. npm i @email@example.com
Nice, that’s all we need for now, let’s proceed to other settings.
Setting Up Firebase Project
Head to Firebase create a new project and activate the email and password authentication service. This is how you do it.
To begin using Firebase, you’ll need a Gmail account. Head over to Firebase and create a new project.
Firebase provides support for authentication using different providers. For example Social Auth, phone numbers as well as the standard email and password method. Since we’ll be using the email and password authentication method in this tutorial, we need to enable this method for the project we created in Firebase, as it is by default disabled.
Under the authentication tab for your project, click the sign-in method and you should see a list of providers Firebase currently supports.
Next, click the edit icon on the email/password provider and enable it.
Next, you need to go and register your application under your Firebase project. On the project’s overview page, select the add app option and pick web as the platform.
Once you’re done registering the application, you’ll be presented with a screen containing your application credentials. Take note of the second script tag as we’ll be using it shortly in our Angular application.
Congratulations, now that you're done with the installations, let's do some configurations.
Setting Up the Router
The app-routing.module.ts file has all the routes available in our app along with their security clearance.
The image below reveals the project structure. Make sure you see the folder arrangement before proceeding.
Now let's make the rest of the project components as seen in the image above.
The App Component
The following code is a wrapper around our app within the angular-router enabling quick navigation. For each route, this component navigates our app to the appropriate URL.
The App Module
Paste the codes in your app.module.ts file, this is a very important file that bundles all the components we will be using for our project.
The Registration Component
This component combines the power of firebase auth-service and CometChat such that whenever a new user signs up for our app, the user’s details are captured by firebase and also registered on our CometChat account. The code below explains it in detail.
So, whenever a user registers in our app, automatically, he or she is simultaneously registered on our CometChat account. Here is the full code that explains it all.
Next, we’ll jump into the Login component and its underlining functionalities.
The Login Component
The Login component follows the characteristics of the Registration component. For example, if a user named Sarah registered on our app, she is then navigated to the login page to sign in. Because CometChat also has her details, she will also be signed in by CometChat the moment she logs into our app. The piece of code below demonstrates this process better.
Once a user is successfully logged in, he is then redirected to the home page. The route-guard within the app.routing-module.ts ensures that only authenticated users are permitted to access the home page. The following scripts below describes the overall operations of the login component.
The Profile Component
The profile component is charged with the responsibility of updating user data which will reflect across our app. One of the primary tasks of this component is to change a user's profile.
Even more, our profile component also has one last surprise for us, it can change the theming of our app. This improves the aesthetics of our app and gives the user more options on their profile preference.
In the registration component, once a user signs up, we generated a placeholder avatar for him using the initial of his name. The profile component allows a user to update their avatar to their preferred choice. Here is the full code performing this operation.
The Chat Component
The chat component is the main meat of this application as It embodies the CometChat UI Kit. Other than the artistic design it carries and the centering of the chat interface in the middle of the screen, it leverages the CSS grid functionality to properly center our chat on the page.
Furthermore, it displays the UI Kit built by the CometChat development team. It has all the components you will need to put together a chat interface in a few minutes. I tell you, this UI Kit makes the development process almost painless.
Just follow the script below and you'll be mind-blown about the power of this kit.
Once you are done pasting the codes as directed, save and run the command below to start your application -
ng serve --open
After a few seconds of building in the terminal, your app should be up and running.
Congratulations, you just built an angular chat app, great job!!!
You've learned how to use the CometChat SDK for creating and updating users via login, registration, and profile components. You have seen how to build most of the chat functionalities such as real-time messaging using CometChat. Now it's time you start developing your 1-on-1 chat apps using the knowledge you've obtained from this tutorial. So, log in to CometChat's developer dashboard to start building your chat app for free.
About the Author
Gospel Darlington is a remote full-stack web developer, prolific in Frontend and API development. He takes a huge interest in the development of high-grade and responsive web applications. He is currently exploring new techniques for improving progressive web applications (PWA). Gospel Darlington currently works as a freelancer and spends his free time coaching young people on how to become successful in life. His hobbies include inventing new recipes, book writing, songwriting, and singing.