Build an Angular 7 chat app
To follow this post, some basic knowledge of Angular is required. Since we’re using Angular we’re gonna also see some TypeScript code.
Has it been a dream of yours to build a chat app? If your answer is yes then you are in luck to fulfill that dream. Being a developer in a world where that is getting ready to colonize other planets with no experience in building chat systems is foul play. Luckily, the CometChat SDK has made the process of integrating communication features in your app a lot simpler. Ride along with me as I guide you into fulfilling your age-old dream.
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.
First, you need to have NodeJs installed on your machine, you can go to the website to do that.
Second, you need to also have the Angular-CLI installed on your computer using the command below.
npm install -g @angular/cli
Next, create a new project with the name one-on-one-chat-app.
ng new one-on-one-chat-app
The ng new command prompts you for information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.
The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.
Last, install these essential dependencies for our project using the command below.
ng add @angular/fire
Now that we're done with the installations, let's move on to building our one-on-one-chat-app solution.
The setup below spells out the format for configuring the environment.ts files for this project.
The setup below shows how to configure the app.config.ts file for proper usage in our project. Make sure you create this file in the src directory before pasting in the codes below.
Nice, that’s all we need for now, let’s proceed to other settings.
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.
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 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.
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.
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 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 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 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 a angular chat app, great job!!!
In conclusion, this tutorial has educated you with the knowledge needed to build a 1-on-1 angular chat application using CometChat's SDK & UI Kit. You've learned how to use the CometChat SDK for creating and updating users via login, registration, and profile components. You've learned how to integrate the CometChat UI Kit in your app, bringing out the full beauty of the chat app.
Now it's time you start developing your 1-on-1 chat apps using the knowledge you've obtained from this lesson. Chat integration has just gotten better, why reinvent the wheel, jump in and start building more app. Log in to CometChat's developer dashboard to start building your chat app for free.
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.