<![CDATA[ deji adesoga - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ deji adesoga - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ Eleventy Sun, 24 May 2026 16:29:47 +0000 60 <![CDATA[ How to Build a Realtime Chat Application with Angular 20 and Supabase ]]> https://www.freecodecamp.org/news/how-to-build-a-realtime-chat-app-with-angular-20-and-supabase/ 6850913c10d2d4fd5525e0d6 Mon, 16 Jun 2025 21:48:44 +0000 Chat applications let you talk in real-time with your friends, family, or coworkers, and help you quickly, effectively, and efficiently transfer of information. When you’re building modern web applications, chat applications are now pretty much a requirement to enable collaboration and enhanced the user experience.

In this tutorial, we will break down how to build a chat application using modern technologies like Angular and Supabase. Building this chat application will help you learn features such as Google OAuth 2.0 for authentication, Angular router for navigation, the CanActivate route guard for route protection, and how to call Supabase functions to create, fetch and delete chats.

On the backend, you will learn how to create database tables in Supabase. You’ll also learn about Supabase functions and Supabase triggers.

Table of Contents

Prerequisites

  • HTML

  • JavaScript

  • TypeScript

Installations and Account Configuration:

Before we begin, make sure you have the following installed and ready:

  • Node.js and npm: Angular requires Node. You can check to see if you have it (and what version you have) by running node -v in your terminal.

  • Angular CLI: This is the command-line tool to scaffold and manage Angular projects. If you don’t have it, install it with npm install -g @angular/cli. Verify with ng version.

  • A Supabase account: Supabase offers a free tier. Sign up on the Supabase website if you haven’t already.

You can also watch the video version of this article below, or on my YouTube channel:

How to Create the User Interface of the Angular Application

To create the user interface of the application, we’ll use Bootstrap 5. In the index.html file of the Angular application, you are going to paste the Bootstrap 5 CDN link as seen below:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>NgChat</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</head>

<body>
  <app-root></app-root>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>

</body>

</html>

Above, you have two CDN links from Bootstrap 5. The first is the <link> tag within the head section, while the second is the <script> tag which is right below the <app-root></app-root> tag.

Now that you have the Bootstrap 5 CDN link setup within the project, the next step is to create two new components called chat and login, respectively, within a pages folder. You can do that using the command below:

ng g c pages/chat-component && ng g c pages/login-component

The login-component.html is going to contain the code below:

<section class="login-block">
  <div class="container">

    <div class="row">
      <div class="col-md-12">
        <a class="btn btn-lg btn-google btn-block text-uppercase btn-outline" href="#"><img
            src="https://res.cloudinary.com/dz4tt9omp/image/upload/v1712537582/google-logo.png"> Signup Using Google</a>
      </div>
    </div>
  </div>
</section>

While the login-component.css will contain the code below:

.login-block {
  width: 300px;
  margin: 0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

.btn {
  border-radius: 2px;
  text-transform: capitalize;
  font-size: 15px;
  padding: 10px 19px;
  cursor: pointer
}


.btn-google {
  color: #545454;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 1px #ddd;
}

To see how the user interface looks, you can call the <app-login /> tag with the app.component.html file, since the route navigations have not yet been configured. The user interface should look like the screenshot below:

Screenshot of a web page running on localhost at port 4200. The page displays a centered white background with a single button labeled "SIGNUP USING GOOGLE" that includes a Google logo icon. The button is slightly elevated with a shadow effect.

How to Set Up a New Supabase Project

To set up Supabase, you will need to create a new account on Supabase.com by using either a GitHub account, or the traditional email and password. Once you’ve done this, you will be presented with a form to create a new organization as you can see in the image below:

Supabase form to create a new organization with name, type, and plan fields.

The organization will be created as fast as your internet speed. Once that is done, the next form you’ll see will allow you to create a new Supabase project.

Supabase interface for creating a new project, showing fields for organization, project name, database password, and region selection.

As you can see from the image above, all you need to do to create a new project is to set a database password and select a region close to where you think most of your users will be. This will help reduce latency. With that you can now click on the create button to create a new project.

Once the project creation is complete, you will be navigated to the dashboard below:

Supabase dashboard showing a new project with no tables and a task list in progress.

With that, you have now set up your new Supabase project.

How to Set Up Google OAuth 2.0 for Authentication and Authorization

To set up Google OAuth 2.0, you need to create an account on Google Cloud Console. Once you create an account, you will be navigated to the dashboard, where you can create a new project by clicking on the select project button on the top left-hand side of the dashboard.

Google Cloud console welcome page showing a $300 free credit offer. A 'Select a project' button is highlighted near the top.

Once you’ve selected the newly created project, you can now begin implementing Google OAuth 2.0 by following these steps:

  • Click on the hamburger menu on the left-hand side of the dashboard and hover over APIs and services.

  • Click on Credentials, on the Credentials page, select Create Credentials at the top menu of the dashboard. A dropdown menu will appear. Select Create OAuth client ID.

  • On the Client ID page, you’ll get a warning message that says “To create an OAuth client ID, you must first configure your consent screen.” Click on the Configure consent screen button.

Next, you’ll be directed to the Branding page. Click on the getting Started button, and you’ll be presented with a form on the overview page as you can see below. Then just fill out the form:

Google Cloud console showing the 'Create branding' page under the Google Auth Platform. The user is filling out app information, including app name and support email, as part of the project configuration steps.

You can now create the OAuth Consent Screen by heading to the Clients tab on the left-side of the dashboard and filling out the details for your application type, the name of your OAuth 2.0 client, as well as the Authorized JavaScript origins.

For the Authorized JavaScript origins, you can enter the URL (http://localhost:4200), since that is the development URL for our Angular application. Then click on the create button. You may get a warning saying “Note: It may take five minutes to a few hours for settings to take effect.”

Once the configuration is complete, you will get a modal that contains a Client ID and a Client Secret, as you can see below:

A Google Cloud OAuth client creation dialog displays the Client ID, Client secret, creation date, status as enabled, and a warning about downloading credentials before June 2025.

Make sure you copy the Client ID and Client secret, as you will use this in the Supabase dashboard.

To complete the authentication and authorization setup, head to the Supabase dashboard. Then navigate to the Authentication menu, which is located in the items on the left-side of the dashboard. On this part of the dashboard, you will select Sign In / Providers.

On the Sign In / Providers page, scroll down to the Auth Providers, then select and enable Google. This is where you will paste in the credentials of the Client ID and Client Secret created on the Google Cloud Console. Then click on the save button – and make sure you copy the Callback URL (for OAuth).

The final step in this process is to head back to the GCP dashboard, and under the Clients tab, click on the edit icon of the OAuth 2.0 Client IDs you created previously.

Under the Authorized redirect URIs, click on the Add URI button. An input box will appear. Paste in the link of the Callback URL (for OAuth) you grabbed in the Supabase dashboard and click save.

How to Configure the Router of the Angular Application

Earlier in this tutorial, you created two components: Chat and Login. At this point, you need to setup the route configuration in the app.routes.ts. In this file, add the code below:

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'chat',
    loadComponent: () =>
      import('./pages/chat/chat-component').then((com) => com.ChatComponent),
  },
  {
    path: 'login',
    loadComponent: () =>
      import('./pages/login/login-component').then((com) => com.LoginComponent),
  },
  {
    path: '',
    loadComponent: () =>
      import('./pages/login/login-component').then((com) => com.LoginComponent),
  },
];

Above, you can see the two components now have their separate routes called chat and login, respectively. They can be accessed anywhere in the application.

How to Set Up the Authentication Service

To setup the authentication service in the Angular application, use the following command:

ng g s services/auth-service

Next, you’ll generate the environments folders to setup the environment variables using the below command:

ng g environments

The final configuration you need to do from the terminal before you begin creating the function for the Angular authentication service is to install Supabase with the command below:

npm i @supabase/supabase-js

And with that, you now have Supabase installed in the project and you can begin integrating the functions in the service. Start from the environment.development.ts file. The current structure of this file should look this way by default:

export const environment = {};

To configure this file, you need to head to the Supabase dashboard. Locate and select the settings menu on the left hand panel of the dashboard. Under the Configuration tab, click on Data API.

Screenshot of Supabase API settings, showing the project URL and API keys section with arrows pointing to the URL and keys, plus buttons to copy each credential.

You can now grab both the Project URL and anon public key (the arrow is pointing to it in the image above). You can now head over to the environment.development.ts file and paste in the values of the copied link following the format below:

export const environment = {
  production: false,
  supabaseUrl: 'https://zktqzszvllbxvjfzkhvk.supabase.co',
  supabaseKey:
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InprdHF6c3p2bGxieHZqZnpraHZrIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDcyNTg3MDgsImV4cCI6MjA2MjgzNDcwOH0.qf3MA-La6se8QijzLFALKc_XdiISmzDk7AZw4-na0uA',
};

With the environment variables all in place, you can now create the functions for the authentication service.

In the auth-service.ts which you created previously, start by importing the Supabase package as well as the environments file as you can see below:

import { Injectable } from '@angular/core';
import { SupabaseClient, createClient } from '@supabase/supabase-js';
import { environment } from '../../environments/environment.development';

Next, complete the injection of the Supabase npm package by injecting it into your constructor:

import { Injectable } from '@angular/core';
import { SupabaseClient, createClient } from '@supabase/supabase-js';
import { environment } from '../../environments/environment.development';

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  supabase!: SupabaseClient;

  constructor() {
      this.supabase = createClient(
      environment.supabaseUrl,
      environment.supabaseKey
    );
  }
}

How to Create the Service Functions for Login and Sign Out Functionality

The final step in setting up the Authservice is to create the functions which will later be called in the template. You are going to create four functions which you can see in the code below:

  private router = inject(Router);
  private _ngZone = inject(NgZone);

  constructor() {
    this.supabase = createClient(
      environment.supabaseUrl,
      environment.supabaseKey
    );

    this.supabase.auth.onAuthStateChange((event, session) => {

      localStorage.setItem('session', JSON.stringify(session?.user));

      if (session?.user) {
        this._ngZone.run(() => {
          this.router.navigate(['/chat']);
        });
      }
    });
  }

  get isLoggedIn(): boolean {
    const user = localStorage.getItem('session') as string;

    return user === 'undefined' ? false : true;
  }

  async signInWithGoogle() {
    await this.supabase.auth.signInWithOAuth({
      provider: 'google',
    });
  }

  async signOut() {
    await this.supabase.auth.signOut();
  }
}

The first function created is within the constructor. This is the onAuthStateChange callback function which is derived from Supabase and allows us to listen to Auth changes. It accepts two parameters called event and session.

Here, two conditions were instantiated within the onAuthStateChange callback function. They say that when the session?.user exists, you proceed to set the value to the local storage, and then navigate the user to the dashboard using the Angular router (which has been imported and injected using the inject() function).

The second function, isLoggedIn(), is a getter function that returns a Boolean. It returns either true or false, depending on if it is able to retrieve the user session from localStorage. This function will be used in the authentication guard which you’ll create later.

The third function, signInWithGoogle(), allows the user log into the dashboard using the signInWithOAuth() method provided by Supabase. This allows the user to log into the dashboard using a Google Gmail account.

The final function, signOut(), allows users to logout of the dashboard by resetting the state of the user session to null.

With all these functions created, the final code base in the auth-service.ts should look like this:

import { Injectable, NgZone, inject } from '@angular/core';
import { SupabaseClient, createClient } from '@supabase/supabase-js';
import { environment } from '../../environments/environment.development';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  private supabase!: SupabaseClient;

  private router = inject(Router);
  private _ngZone = inject(NgZone);
  constructor() {
    this.supabase = createClient(
      environment.supabaseUrl,
      environment.supabaseKey
    );

    this.supabase.auth.onAuthStateChange((event, session) => {
      console.log('event', event);
      console.log('session', session);

      localStorage.setItem('session', JSON.stringify(session?.user));

      if (session?.user) {
        this._ngZone.run(() => {
          this.router.navigate(['/chat']);
        });
      }
    });
  }

  get isLoggedIn(): boolean {
    const user = localStorage.getItem('session') as string;

    return user === 'undefined' ? false : true;
  }

  async signInWithGoogle() {
    await this.supabase.auth.signInWithOAuth({
      provider: 'google',
    });
  }

  async signOut() {
    await this.supabase.auth.signOut();
  }
}

You can now utilize these functions anywhere in the Angular project as a form of state management.

How to Integrate the Authentication Service Function in the Template

The first function we’ll use is the signInWithGoogle() function. We’ll use it in the login-component.ts file to allow users log into the application as you can see below:

import { Component, inject } from '@angular/core';
import { AuthService } from '../../services/auth-service';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [],
  templateUrl: './login-component.html',
  styleUrl: './login-component.css',
})
export class LoginComponent {
  private auth = inject(AuthService);

  async handleAuth() {
    const response = await this.auth.signInWithGoogle();
  }
}

Above, you implemented three features:

  • Importing AuthService into the LoginComponent

  • Injecting AuthService using the Inject function into the LoginComponent

  • Creating the handleAuth() function that allows you call the signInWithGoogle() from the AuthService file.

Now you can head to the login-component.html file and call the handleAuth() function as below within the <a> tag:

<section class="login-block">
  <div class="container">

    <div class="row">
      <div class="col-md-12">
        <a (click)="handleAuth()" class="btn btn-lg btn-google btn-block text-uppercase btn-outline" href="#"><img
            src="https://res.cloudinary.com/dz4tt9omp/image/upload/v1712537582/google-logo.png"> Signup Using Google</a>
      </div>
    </div>
  </div>
</section>

Before you test the implementation, you will need to set the URL configuration in the Supabase dashboard. The URL configuration allows the URLs that authentication providers permit to redirect and post authentication, including wildcards.

Interface displaying authentication settings, including site URL configuration and allowed redirect URLs for a web application.

As you can see in the above image, the two Redirect URLs provided are localhost, since we are still currently creating the app in our local machine.

With this, you can test the Google OAuth 2.0 configuration by typing the localhost URL (http://localhost:4200) in the browser, clicking on the Signup Using Google button, and selecting a Gmail account you want to sign up/login with. Then you should get navigated to the Chat component.

How to Create Route Protection in Angular

To create route protection in Angular, you can use an in-built mechanism called a Route Guard. The Route Guard is used to control access to certain parts of the Angular application using certain conditions before a route is activated or accessible to the user.

In our case, you will be generating the Route Guard as a function (which is the default in our current version of Angular (20), instead of as a class) using the command below:

ng generate guard auth-guard

You will then see this prompt that asks “Which type of guard would you like to create?”:

650c5bf7-8e1c-45cf-915b-c988c167416a

Use the spacebar to select CanActivate, and then press the Enter key to generate the Guard. Two files will be generated: the auth-guard.spec.ts file (for testing), and the auth-guard.ts file. Within the auth-guard.ts file, you will see the boilerplate code below:

import { CanActivateFn } from '@angular/router';

export const authGuard: CanActivateFn = (route, state) => {
  return true;
};

You can start modifying the above template by importing the Angular Router, the AuthService file that you created earlier, as well as the Inject function:

import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from './services/auth-service';
import { inject } from '@angular/core';

Next, use the isLoggedIn getter that you created earlier in the AuthService file (which returns a Boolean) to conditionally activate the Chat dashboard for the user based on their login status using the code below:

import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from './services/auth-service';
import { inject } from '@angular/core';

export const authGuard: CanActivateFn = (route, state) => {
  if (inject(AuthService).isLoggedIn === false) {
    inject(Router).navigate(['/login']);
    return false;
  } else {
    return true;
  }
};

To complete the Guard integration, head over to the app.routes.ts file and import and inject the Authentication Guard as you can see below:

import { Routes } from '@angular/router';
import { authGuard } from './auth-guard';

export const routes: Routes = [
  {
    path: 'chat',
    canActivate: [authGuard],
    loadComponent: () =>
      import('./pages/chat/chat-component').then((com) => com.ChatComponent),
  },
  {
    path: 'login',
    loadComponent: () =>
      import('./pages/login/login-component').then((com) => com.LoginComponent),
  },
  {
    path: '',
    loadComponent: () =>
      import('./pages/login/login-component').then((com) => com.LoginComponent),
  },
];

With this, the route protection implementation is now complete and only authenticated users can view the dashboard.

How to Create and Setup the Users Table in Supabase using the SQL Editor

To create and setup the users table, use the schema below:

  • id (uuid)

  • full_name (text)

  • avatar_url (text)

You can use the SQL Editor in Supabase. The SQL Editor is the third item on the menu panel in the Supabase dashboard. Here you are going to type in the query below in the SQL Editor input field:

CREATE TABLE public.users (
   id uuid not null references auth.users on delete cascade,
   full_name text NULL,
   avatar_url text NULL,
   primary key (id)
);

You can now click on the Run button on the bottom right. You should get a message that says: Success. No rows returned, as you can see in the image below:

SQL code for creating a user profile table with fields for id, full name, and avatar URL. Returns No rows returned after execution.

Now let’s go ahead and enable row level security, as well as the Supabase function and trigger.

How to Configure Row Level Security Policies in Supabase with the SQL Editor

Row Level Security (RLS) in Supabase allows you to control access to individual rows in your database tables based on custom logic. It’s one of the core features for building secure, multi-user applications with Supabase.

RLS lets you define SQL policies that determine which users can SELECT, INSERT, UPDATE, or DELETE specific rows in a table.

To enable RLS in the users table, type the command below in your SQL Editor:

ALTER TABLE public.users ENABLE ROW LEVEL SECURITY;

For the purpose of this tutorial, you are going to create just two policies, which are:

  1. The ability for users to access their own profile

  2. The ability for users to update their own profile

The ability for users to access their own profile

To enable users access their own profile, head back to the SQL editor and create a new snippet with the following query:

CREATE POLICY "Permit Users to Access Their Profile"
  ON public.users
  FOR SELECT
  USING ( auth.uid() = id );

With this query, users will be able to access their own profile as long as the authenticated user’s ID matches the id of the column of the row.

The ability for users to update their own profile

To enable users update their own profile, head back to the SQL editor and create a new snippet with the following query:

CREATE POLICY "Permit Users to Update Their Profile"
  ON public.users
  FOR UPDATE
  USING ( auth.uid() = id );

With the above query, users will be able to update their own profile as long as the authenticated user’s ID matches the id of the column of the row.

Screenshot of SQL Editor displaying a policy script for user profile updates, with navigation pane and no results returned.

How to Configure Supabase Functions in Supabase with the SQL Editor

Supabase Functions are serverless functions that can be deployed and run within your Supabase project using Supabase Edge Functions.

In this project, you will create a trigger function that automatically creates a new row in the users table whenever a new user is created in the auth.users table.

CREATE
OR REPLACE FUNCTION public.user_profile() RETURNS TRIGGER AS $$ BEGIN INSERT INTO public.users (id, full_name,avatar_url)
VALUES
  (
    NEW.id,
    NEW.raw_user_meta_data ->> 'full_name'::TEXT,
    NEW.raw_user_meta_data ->> 'avatar_url'::TEXT
  );
RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

To summarize the above query:

  • You start by defining or replacing a function named user_profile() that will be used as a trigger.

  • Next, the trigger inserts a new row into the public.users table, and then extracts the full_name and avatar_url from the user's metadata as text.

  • The inserted record is now returned when the trigger function is complete

  • Finally, you use the SECURITY DEFINER keyword so that the function can run with the privileges of the user who created it.

How to Configure Supabase Trigger in Supabase with the SQL Editor

A trigger in Supabase is a PostgreSQL feature used to automatically run a function in response to events on a table (SELECT, INSERT, UPDATE, or DELETE). It’s mostly used with Row Level Security or syncing data across tables.

In this project, you will create a Supabase trigger that automatically runs a function after a new user is created in the auth.users table.

 CREATE TRIGGER
  create_user_trigger
  AFTER INSERT ON auth.users
  FOR EACH ROW
  EXECUTE PROCEDURE
    public.user_profile();

To summarize the above query:

  • The first line creates a trigger named create_user_trigger.

  • Next, the INSERT ON statement is activated when a user signs up and a new row is inserted into the auth.users table

  • Then the trigger runs once for every new user added in a new row.

  • Finally, the custom function public.user_profile() is called to perform some logic, typically inserting data into the users table.

With the above integration, you can now log into the dashboard with a new google account and view the users table. There you will see the data that contains the id, full_name, and avatar_url as you can see below:

Screenshot of a database table editor displaying user data, including name and avatar URL, with options for filtering and sorting.

How to Create and Setup the Chat Table in Supabase using the User Interface

To create the chat table, you will use the user interface in Supabase instead of the SQL Editor. To do this, you need to head to the Table Editor menu on the dashboard and click on the New Table button.

Once selected, a modal will popup which contains some input fields such as the table name, description, and columns. You can call the table name chat and omit the description for now since it’s optional. In the columns section, fill out the fields using the schema below:

  • id (uuid)

  • Created At (date)

  • text (text)

  • editable (boolean)

  • sender (uuid)

You can see the configuration for this in the table below:

Screenshot of a table editor interface displaying fields for creating a new database table with various data types and options.

Next up, you need to add a foreign key relation for the users table. To do this, you scroll to the bottom of the modal and click on the Add foreign key relation button. This will prompt another modal on top of the current modal. Here you can take the following steps:

  • Under the Select a table to reference to label, select the users table.

  • Under the public.chat label, select the sender option.

  • Under public.users label, select uuid.

  • Under the Action if referenced row is updated label, select Cascade.

  • Under the Action if referenced row is removed label, select Cascade as well.

If you’ve followed the above steps, you can now click on the save button, which successfully creates the chat table.

How to Create and Setup the Chat Table Policies in Supabase

The final step you need to perform for the chat table is to add a Row Level Security policy. You can do this by clicking the Add RLS policy button at the top of the chat table page.

A web interface displaying a Table Editor with options for managing chat and user data in a database schema.

A new page will appear. Then you can click on the Create policy button, which displays a modal.

The first policy you will create is the DELETE policy, which will have the configuration you can see in the image below:

Screenshot of a database policy settings interface for deleting user records based on user ID in a chat application.

From the above image, we made these four implementations:

  • First, we entered the policy name as “Delete by User ID“.

  • Next we selected the DELETE policy command clause.

  • Then under the targeted roles, we selected authenticated in the drop down select, to allow only authenticated users to perform delete operations.

  • Finally, under the USE OPTIONS ABOVE TO EDIT section, in line 7, we condition the query as (auth.uid() = sender) This allows only logged in users to delete their data.

You can now click on the Save policy button to complete the DELETE setup.

The second policy you will create is the INSERT policy, which will have the configuration you can see in the image below:

A policy configuration interface for inserting records in a chat table, targeting authenticated users with specific criteria.

From the above image, four implementations were made:

  • First, we entered the policy name as “Insert for Authenticated Users“.

  • Next we selected the INSERT policy command clause.

  • Then under the targeted roles, we selected authenticated in the drop down to allow only authenticated users perform insert operations.

  • Finally, under the USE OPTIONS ABOVE TO EDIT section, in line 7, the query was conditioned as ((sender = auth.uid()) AND (created_at = now())). The first condition ensures that the sender field in the inserted row matches the currently logged-in user's ID (from the Supabase JWT), while the second condition ensures that the created_at field is exactly equal to the current timestamp at the time of insertion.

The third policy you will create is the SELECT policy, which will have the configuration you can see in the image below:

Row-level security policy configuration for a database table, specifying access permissions for authenticated users based on SELECT criteria.

From the above image, we implemented four things:

  • First, we entered the policy name as “Read Data for Authenticated Users“.

  • Next we selected the SELECT policy command clause, pun intended 😊*.*

  • Then under the targeted roles, we selected authenticated in the drop down to allow only authenticated users perform select operations.

  • Finally, under the USE OPTIONS ABOVE TO EDIT section, in line 7, the query was conditioned as true. This allows all authenticated users to read all rows, or chats in our case.

With the above implementation, you’ve created all the policies needed for the chat application.

How to Integrate Functionality to Create a New Chat Message in the Angular Application

Now let’s add the code that lets users create a new chat message. First, start by creating a new Angular service using the command below:

ng g s services/chat-service

Within the chat-service.ts file, you can now configure the Supabase client, just as we did in the auth-service.ts file as seen below:

import { Injectable, signal } from '@angular/core';
import { SupabaseClient, createClient } from '@supabase/supabase-js';
import { environment } from '../../environments/environment.development';

@Injectable({
  providedIn: 'root',
})
export class ChatService {
  supabase!: SupabaseClient;

  constructor() {
    this.supabase = createClient(
      environment.supabaseUrl,
      environment.supabaseKey
    );
  }
}

Next, create the function that enables you to create a new chat message. The function called chatMessage() is below:

import { Injectable, signal } from '@angular/core';
import { SupabaseClient, createClient } from '@supabase/supabase-js';
import { environment } from '../../environments/environment.development';

@Injectable({
  providedIn: 'root',
})
export class ChatService {
  supabase!: SupabaseClient;

  constructor() {
    this.supabase = createClient(
      environment.supabaseUrl,
      environment.supabaseKey
    );
  }

  async chatMessage(text: string) {
    try {
      const { data, error } = await this.supabase.from('chat').insert({ text });

      if (error) {
        alert(error.message);
      }
    } catch (error) {
      alert(error);
    }
  }
}

The above chatMessage function sends a chat message by inserting it into the chat table in Supabase.

You can now call this service in the chat-component.ts file. Within the chat-component.ts, import and inject the chat-service.ts file.

To send the data to the Supabase database, you need to setup Reactive form. Reactive form in Angular enables you to get data from an input field, which can be passed as a payload and then inserted into the database.

To setup a Reactive form in Angular, follow these steps:

  • Import FormBuilder, FormGroup, ReactiveFormsModule, and Validators from @angular/forms

  • Insert the ReactiveFormsModule inside of the imports array.

  • Inject the FormBuilder as a variable.

  • Declare a property that will hold the Reactive Form group.

  • Inject the FormBuilder into the ngOnInit lifecycle hook.

The code for the Reactive form setup is below:

import { Component, inject } from '@angular/core';
import { AuthService } from '../../services/auth-service';
import {
  FormBuilder,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';

@Component({
  selector: 'app-chat',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './chat-component.html',
  styleUrl: './chat-component.css',
})
export class ChatComponent {
  chatForm!: FormGroup;
  private fb = inject(FormBuilder);

  ngOnInit() {
    this.chatForm = this.fb.group({
      chat_message: ['', Validators.required],
    });
  }
}

To complete the Reactive form setup, bind the FormGroup into the HTML file. Also bind the disabled attribute, which disables the button when the form is invalid, as you can see below:

  <form [formGroup]="chatForm">
          <div class="flex-grow-0 py-3 px-4 border-top">
              <div class="input-group">
                <input formControlName="chat_message" type="text" class="form-control" placeholder="Type your message">
                <button [disabled]="!chatForm.valid" class="btn btn-primary">Send</button>
              </div>
           </div>
    </form>

With the Reactive form setup complete, you can now create the function that calls the service which allows you create a new chat message.

import { Component, inject } from '@angular/core';
import { AuthService } from '../../services/auth-service';
import {
  FormBuilder,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { ChatService } from '../../services/chat-service';

@Component({
  selector: 'app-chat',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './chat-component.html',
  styleUrl: './chat-component.css',
})
export class ChatComponent {
  private chat_service = inject(ChatService);
  chatForm!: FormGroup;
  private fb = inject(FormBuilder);

  ngOnInit() {
    this.chatForm = this.fb.group({
      chat_message: ['', Validators.required],
    });
  }

  onSubmit() {
    const formValue = this.chatForm.value.chat_message;
    this.chat_service
      .chatMessage(formValue)
      .then((res) => {
        this.chatForm.reset();
      })
      .catch((err) => {
        alert(err.message);
      });
  }
}

The onSubmit() function in the above code basically does the following tasks:

  • Gets the data from the Reactive form input field using the variable called formValue

  • Calls the chatMessage() method from the ChatService, passing the data from the input field.

  • If successful, it resets the form.

  • If there's an error, it shows an alert with the error message.

In the chat-component.html file, use of the (ngSubmit) directive to bind the onSubmit() function to the form:

<form [formGroup]="chatForm" (ngSubmit)="onSubmit()">

You can now test to see if the data we send from the input field saves directly into the chat database table.

NOTE: make sure you delete all current users saved in the users table and authentication page on Supabase before trying this out for best results.

Screenshot of a chat interface showing a message from "Sharon Doe," with a timestamp and a text input field at the bottom.

From the above image, you will click on the send button and send the Test data in the input field.

Table editor interface displaying the "chat" table with columns including ID, created_at, text, editable, and sender, showing entries and configuration options.

The data should now be successfully saved into the database and the INSERT operation should now be integrated into the Angular application.

How to Fetch Data in the Angular Application from Supabase

To fetch data from the chat table from Supabase, start by creating a service function in the chat-service.ts file, as seen below:

import { Injectable, signal } from '@angular/core';
import { SupabaseClient, createClient } from '@supabase/supabase-js';
import { environment } from '../../environments/environment.development';

@Injectable({
  providedIn: 'root',
})
export class ChatService {
  supabase!: SupabaseClient;

  constructor() {
    this.supabase = createClient(
      environment.supabaseUrl,
      environment.supabaseKey
    );
  }

  async chatMessage(text: string) {
    try {
      const { data, error } = await this.supabase.from('chat').insert({ text });
      if (error) {
        alert(error.message);
      }
    } catch (error) {
      alert(error);
    }
  }

    async listChat() {
    try {
      const { data, error } = await this.supabase
        .from('chat')
        .select('*,users(*)');

      if (error) {
        alert(error.message);
      }

      return data;
    } catch (error) {
      throw error;
    }
  }
}

To summarize the function above called listChat():

  • We fetch the chat messages from the chat table using the from clause.

  • Then we include the related user info by joining the users table with (select(', users()')).

  • An alert message is shown if there's a Supabase error.

  • Finally, the fetched data is returned, an error is thrown if something goes wrong.

Before you head to the chat-component.ts file to consume the listChat() service function, you need to create an interface which helps shape the structure of the array of objects returned from Supabase. This gives us type safety and consistency.

To set up the interface, create an interface folder within the app directory. Here you will create a file called chat-response.ts. Then create the structure below:

export interface Ichat {
  created_at: string;
  editable: boolean;
  id: string;
  sender: string;
  text: string;
  users: {
    avatar_url: string;
    id: string;
    full_name: string;
  };
}

Heading back to the chat-component.ts, import both the interface which was named Ichat as well as signal and effect from @angular/core:

import { Component, effect, inject, signal } from '@angular/core';
import { AuthService } from '../../services/auth-service';
import {
  FormBuilder,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { ChatService } from '../../services/chat-service';
import { Ichat } from '../../interface/chat-response';

Next, create a variable called chats, which will hold the response from the Supabase client as a signal:

  chats = signal<Ichat[]>([]);

With this, you can now create the function that fetches the chat array of objects from the Supabase dashboard:

  onListChat() {
    this.chat_service
      .listChat()
      .then((res: Ichat[] | null) => {
        console.log(res);
        if (res !== null) {
          this.chats.set(res);
        } else {
          console.log('No messages Found');
        }
      })
      .catch((err) => {
        alert(err.message);
      });
  }

To summarize the function above, we started by:

  • Calling the listChat() function from the ChatService to fetch the chat messages.

  • If messages are returned, it updates the chats signal with the result, by using the set() method derived from signals.

  • In the event where no messages are returned, it logs "No messages Found" to the console.

  • If an error occurs, it shows an alert with the error message.

We then call the onListChat() function within the constructor using the effect() function, which helps handle asynchronous operations.

constructor() {
    effect(() => {
      this.onListChat();
    });
  }

When the application is saved, you can see the data in the console from the image below:

Screenshot of a chat application showing a message from Sharon Doe, along with developer tools displaying the message data in an array of object.

You can now display the chat data in the HTML file of the page by getting rid of the placeholder text.

To do this, you can use the @for control flow in Angular as seen below:

<main>
  <div class="container">
    <h3 class="mb-3">Supa Chat <button class="btn btn-secondary" style="float: right;">Log
        out</button>
    </h3>
    <div class="card">
      <div>

        <div class="col-12 col-lg-12 col-xl-12">
          @for (msg of this.chats(); track msg) {
          <div class="position-relative">
            <div class="chat-messages p-4">
              <div class="chat-message-left pb-4">
                <div class="me-5">
                  <img src={{msg?.users?.avatar_url}} class="rounded-circle mr-1" alt="image" width="40" height="40">
                  <div class="text-muted small text-nowrap mt-2">{{msg?.created_at | date: 'M/d/yy, h:mm a'}}</div>
                </div>
                <div class="flex-shrink-1 bg-light rounded py-2 px-3 ml-3">
                  <div class="font-weight-bold mb-1">{{msg?.users?.full_name}}</div>
                  {{msg?.text}}
                </div>
              </div>
            </div>
          </div>
          } @empty {
          <div>No chats available</div>
          }

          <form [formGroup]="chatForm" (ngSubmit)="onSubmit()">
            <div class="flex-grow-0 py-3 px-4 border-top">
              <div class="input-group">
                <input formControlName="chat_message" type="text" class="form-control" placeholder="Type your message">
                <button [disabled]="!chatForm.valid" class="btn btn-primary">Send</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</main>

From the code above, right above the div with the position-relative class, we declared the @for (msg of this.chats(); track msg) control flow, which does the following:

  • Loops through the array returned by this.chats() which is the signal variable that was declared in the template.

  • Assigns each item in the array to the msg variable.

  • Tracks each item by identity track msg for DOM updates.

Next, within the loop, you called the data in the appropriate HTML tag to display the image, the date the chat was created, the full name, and the chat message as well.

Finally, you created an @empty block which displays the message No chats available if there are no items in the array.

You should have the outcome below:

A chat interface displaying two messages from the user "adedeji adesoga," dated June 4, 2025, with a text input box at the bottom.

How to Delete Data in the Angular Application

When creating the delete functionality, first you need to create a service function in the chat-service.ts file as seen below:

  async deleteChat(id: string) {
    const data = await this.supabase.from('chat').delete().eq('id', id);
    return data;
  }

All the above function does is find the specific id provided from the parameter, and return the result of the delete operation.

Next, track the selected chat that was clicked from the array of listed chats and then pass the data down to your service.

To do this, first create a function within the service called selectedChats() which helps receive the data from the template:

 public savedChat = signal({});

 selectedChats(msg: Ichat) {
    this.savedChat.set(msg);
  }

Above, we created the variable called savedChat. It’s declared as a signal that helps receive the object of the chat that we want to delete using the set() method.

You can now head to the chat-component.ts file to create the function that passed the data down to the selectedChats() function.

You can see this function below:

 openDropDown(msg: Ichat) {
    console.log(msg);
    this.chat_service.selectedChats(msg);
  }

As you can see from the function above, once you bind it to the HTML element, it will make sure that you get the object of the specific chat that was clicked.

In our chat-component.html file, create a menu drop down that will help achieve this result as seen below:

<main>
  <div class="container">
    <h3 class="mb-3">Supa Chat <button class="btn btn-secondary" style="float: right;">Log
        out</button>
    </h3>
    <div class="card">
      <div>

        <div class="col-12 col-lg-12 col-xl-12">
          @for (msg of this.chats(); track msg) {
          <div class="position-relative">
            <div class="chat-messages p-4">
              <div class="chat-message-left pb-4">
                <div class="me-5">
                  <img src={{msg?.users?.avatar_url}} class="rounded-circle mr-1" alt="image" width="40" height="40">
                  <div class="text-muted small text-nowrap mt-2">{{msg?.created_at | date: 'M/d/yy, h:mm a'}}</div>
                </div>
                <div class="flex-shrink-1 bg-light rounded py-2 px-3 ml-3">
                  <div class="font-weight-bold mb-1">{{msg?.users?.full_name}}</div>
                  {{msg?.text}}
                </div>

                <!-- Delete Modal Button Menu-->
                <div class="dropdown">
                  <span (click)="openDropDown(msg)" class="mt-3 ms-5" type="button" id="dropdownMenuButton1"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    ...
                  </span>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                    <li>
                      <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal">Delete</a>
                    </li>
                  </ul>
                </div>


              </div>
            </div>
          </div>
          } @empty {
          <div>No chats available</div>
          }

          <form [formGroup]="chatForm" (ngSubmit)="onSubmit()">
            <div class="flex-grow-0 py-3 px-4 border-top">
              <div class="input-group">
                <input formControlName="chat_message" type="text" class="form-control" placeholder="Type your message">
                <button [disabled]="!chatForm.valid" class="btn btn-primary">Send</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</main>

From the above code, take note of the following: the comment with the text <!-- Delete Modal Button Menu--> is created within the @for control flow. This is essential because it allows the openDropDown(msg) to receive the right object as a parameter when the drop down menu is clicked. A quick look at the console will reveal this.

You can now create the delete modal component, which allows you to consume the delete service required for a chat to be deleted.

To create the delete component, use the command below:

ng g component layout/modal-component

The design for the delete component is a Bootstrap 5 modal that looks like this:

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Are really sure you want to delete this message?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
        <button [attr.data-bs-dismiss]="!this.dismiss() === true ? 'modal' : null" (click)="deleteChat()" type="button"
          class="btn btn-primary">Yes</button>
      </div>
    </div>
  </div>
</div>

If you paste the above code directly in your code editor, you’re going to get a host of errors because we have not created the deleteChat() function as well as the dismiss() signal variable in the template file. Let’s go ahead and do that.

The first step in setting up the modal-componet.ts file component is to import the appropriate modules as seen below:

import { Component, effect, inject, signal } from '@angular/core';
import { ChatService } from '../../services/chat.service';
import { Router } from '@angular/router';

Next, inject the chatservice, Angular router, as well as the the dismiss variable which is a signal as seen below:

  private chat_service = inject(ChatService);
  private router = inject(Router);
  dismiss = signal(false);

With this you can now create the deleteChat() function as seen below:

deleteChat() {
    const id = (this.chat_service.savedChat() as { id: string }).id;

    console.log(id);

    this.chat_service
      .deleteChat(id)
      .then(() => {
        let currentUrl = this.router.url;

        this.dismiss.set(true);

        this.router
          .navigateByUrl('/', { skipLocationChange: true })
          .then(() => {
            this.router.navigate([currentUrl]);
          });
      })
      .catch((err) => {
        console.log(err);
        alert(err.message);
      });
  }

  • The first thing we did under the deleteChat() method was to extract the id from the chat service.

  • This id is then passed into the deleteChat() method from our service which helps delete the specific chat that was selected.

  • Once the chat has been deleted, the current route gets reloaded to update the UI.

To activate the modal, you need to import the Modal Component in the chat-component.html file (last line of code below:

<main>
  <div class="container">
    <h3 class="mb-3">Supa Chat <button class="btn btn-secondary" style="float: right;">Log
        out</button>
    </h3>
    <div class="card">
      <div>

        <div class="col-12 col-lg-12 col-xl-12">
          @for (msg of this.chats(); track msg) {
          <div class="position-relative">
            <div class="chat-messages p-4">
              <div class="chat-message-left pb-4">
                <div class="me-5">
                  <img src={{msg?.users?.avatar_url}} class="rounded-circle mr-1" alt="image" width="40" height="40">
                  <div class="text-muted small text-nowrap mt-2">{{msg?.created_at | date: 'M/d/yy, h:mm a'}}</div>
                </div>
                <div class="flex-shrink-1 bg-light rounded py-2 px-3 ml-3">
                  <div class="font-weight-bold mb-1">{{msg?.users?.full_name}}</div>
                  {{msg?.text}}
                </div>

                <!-- Delete Modal Button Menu-->
                <div class="dropdown">
                  <span (click)="openDropDown(msg)" class="mt-3 ms-5" type="button" id="dropdownMenuButton1"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    ...
                  </span>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                    <li>
                      <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#exampleModal">Delete</a>
                    </li>
                  </ul>
                </div>


              </div>
            </div>
          </div>
          } @empty {
          <div>No chats available</div>
          }

          <form [formGroup]="chatForm" (ngSubmit)="onSubmit()">
            <div class="flex-grow-0 py-3 px-4 border-top">
              <div class="input-group">
                <input formControlName="chat_message" type="text" class="form-control" placeholder="Type your message">
                <button [disabled]="!chatForm.valid" class="btn btn-primary">Send</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</main>

<!-- modal -->

<app-modal />

NOTE: Don’t forget to import the ModalComponent file in the chat-component.ts file to avoid having any errors.

You have now implemented the ability to Insert, read, and delete data. The final implementation is to integrate the logout functionality.

How to Implement Logout Functionality in the Angular Application

Earlier in the tutorial, within the auth-service.ts file, you created a function called signOut() as seen below:

 async signOut() {
    await this.supabase.auth.signOut();
  }

In the chat-component.ts file, you will import and inject the sigOut() method. To do this, follow these steps:

  • Import and inject the Angular router.

  • Import and inject the Authentication Service file

  • Create the logOut() function that consumes the signOut() service:

async logOut() { 
this.auth .signOut() .then(() =>
 { this.router.navigate(['/login']); }) 
.catch((err) => {
 alert(err.message);
 });
 }
  • Finally in the chat-component.html file, within the button tag at the top of the page, call the logout() function using the (click) event handler:
  <h3 class="mb-3">Supa Chat 
    <button (click)="logOut()" class="btn btn-secondary" style="float: right;">Log Out</button>
  </h3>

Once the Log Out button is clicked, the user gets navigated to the Login page and the user state gets reset in the browser.

Conclusion

In this tutorial, you learned how to build a real-time chat application using Angular and Supabase. We covered the following key concepts:

  • How to create database tables in Supabase

  • How to create triggers and functions in Supabase

  • How to use signals to manage state in an Angular

  • How to create authentication and authorization using Supabase and Google OAuth 2.0

  • How to work with Reactive forms in Angular

and lots more.

You can access the full codebase by cloning the repository on GitHub.

If you found this article helpful, consider subscribing to my YouTube channel where I share hands-on tutorials on modern web development technologies like JavaScript, HTML, CSS, Angular, Supabase, Firebase, React, Third party API and AI tools, and many more. Cheers!

]]> <![CDATA[ How to Integrate Chart.js in Angular Using Data from a REST API ]]> https://www.freecodecamp.org/news/how-to-integrate-chart-js-in-angular-using-data-from-a-rest-api/ 66d45e01f855545810e93415 Thu, 30 Mar 2023 15:54:23 +0000 Charts are a great way of visually displaying large sets of data in formats that are easy to understand and analyze. They are a great way of showing the relationship that exists between two or more data sets.

Different types of charts exist, some of which includes bar chart, line chart, pie chart, radar chart, etc.

In this article, you will make use of a frontend framework called Angular as well as a JavaScript library called Chart.js to display data from a cryptocurrency platform called Coinranking. You will also make use of the Coinranking API to visualize a list of Cryptocurrencies along with their prices.

Prerequisites

To follow along with this tutorial, make sure you are familiar with the basics of the technologies listed below:

  • HTML

  • JavaScript

  • TypeScript

  • npm

Table of Contents

You can also watch the video version of this article below, or on my YouTube channel:

How to Install and Create the Angular Application

Firstly, you need to install and set up Angular using the following steps:

Step 1: Install NPM (Node Package Manager)

To install npm, you need to download Node.js. This can be done through the Node.js website.

Node.js is an open-source cross platform server environment that can run on Windows, Linux, Unix, macOS, and more. It allows us to make use of npm to install libraries like Chart.js into our Angular application.

Step 2: Install the Angular CLI (Command Line Interface)

Once Node.js is installed, you can now download Angular into your machine with the terminal/command line using the command below:

npm install -g @angular/cli

To confirm Angular has been installed, you can view the version by running the command ng v, which will give us the result below:

Image

Angular CLI Version

Step 3: Create a New Angular Project

Now that Angular has been installed, you can now create a new project by running the following commands in the terminal:

ng new ng-chart --routing=false --style=css
cd ng-chart
code .

With the commands above, we've created a new Angular project using the ng new command, disabled the routing and set the styling format to CSS.

Next, navigate into the project directory using the cd command, and open the project in Visual Studio Code.

You do not need to generate a new component for this project. You will use the two default files created by the Angular CLI — app.component.ts and app.component.hmtl — to render the chart. These files are in the app directory of your project.

The app.component.html file contains some boilerplate code which you need to get rid of. The Chart.js library can now be integrated into your application.

How to Integrate Chart.js in Angular

To add the chart.js library to the Angular app, you need to run the following command inside your terminal:

npm i chart.js

To confirm chart.js has been installed, you can check the package.json file in your project. You should see the chart.js version in the dependencies object shown in the image below:

Image

Chart.js version

You can now import the chart.js library inside your project in the app.component.ts file as can be seen below:

import Chart from 'chart.js/auto';

Next, create a variable called chart and set it to an empty array:

chart: any = []

Navigate to the getting started page of the chart.js documentation and grab the boilerplate code with static data, and paste it into the ngOnInit lifecycle hook:

Note: The ngOnInit lifecycle hook in Angular gets triggered once after a component is initialized. That is, it gets called only when the first change detection occurs in an Angular component.

export class AppComponent {
  title = 'ng-chart';
  chart: any = [];

  constructor() {}

  ngOnInit() {
    this.chart = new Chart('canvas', {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [
          {
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            borderWidth: 1,
          },
        ],
      },
      options: {
        scales: {
          y: {
            beginAtZero: true,
          },
        },
      },
    });
  }
}

In the code above, within the data object, there is a labels key which contains an array with different values. Beneath that you have the datasets array which contains an object.

Within the object, there is an array called data with values of different numbers. These values represent the data that will get displayed on the chart in the browser.

Before the chart gets displayed in the browser, you'll need to also grab the <canvas></canvas> html tag and paste it in the app.component.html file as seen below:

<div>
  <canvas id="canvas">{{chart}}</canvas>
</div>

Note: In the app.component.html file, the <canvas> tag has an id called canvas. This must have the same name as the value inside the parentheses before the new Chart object in the app.component.ts file. If the names are not the same, the chart will not display.

You can now compile and serve the project by running the ng serve --open command in the terminal. You should have the following results:

Image

Displaying the charts with static data

How to Integrate the REST API

To integrate the REST API, head over to the Coinranking website using this link. You should see a page like this:

Image

Coinranking website

Start by clicking on the "Get API Key" button. You will be directed to a page where you can create an account and have access to an API key.

Copy the API key and open the environment.ts file in your Angular project. Within the object, create a variable called API_KEY and paste in the API key generated from CoinRanking as seen below:

export const environment = {
  production: false,
  API_KEY: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
};

Next, you need to copy the API to get all cryptocurrency coins from the CoinRanking documentation.

Image

Coinranking API documentation

To use the API link copied above, you need to create an Angular Service by running the command below:

ng g service services/chart

With the chart.service.ts file created, you can now paste in the code that helps us consume the REST API as seen below:

To summarize the above code, here's what we did:

  • We imported the HttpClient, HttpHeaders in line 2, as well as the environment file in line 3.

  • Between line 5 and line 11, we created a variable called httpOptions. The httpOptions variable holds an object that contains the HttpHeaders configuration imported above. Here we set the content-type, passed the API_KEY variable from the environment file to the headers, and then set the Access-Control-Allow-Origin to a wildcard. This means the browser should allow request code from the origin.

  • In line 17, we created a private variable called baseUrl to hold the REST API, while in line 28, we created a variable called proxyUrl to hold the CORS Anywhere link. The CORS Anywhere link is a NodeJS proxy that adds CORS headers to the proxied request and helps to prevent CORS errors in the process.

  • In line 20, we injected the HttpClient into the constructor which makes it accessible within the Service.

  • Finally, we created a function called cryptoData() in line 22. Within this function lies a variable called url. We used the url variable to append both the proxyUrl and baseUrl variables to construct our API. Furthermore, in the return statement, we used the get() http method to fetch the data from the REST API.

To make the HttpClient work, you need to import and inject the HttpClientModule into the app.module.ts file which can be seen below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

As seen above, the HttpClientModule was imported and injected into the imports array.

How to Display the Data in the Chart

To display the data on the chart, you need to head to the app.component.ts file and bring in your Chart service file as seen below:

  • As seen above, we begin by importing the Chart Service and injecting it into our component in line 3 and line 17 respectively.

  • We created three variables called result, coinPrice, and coinName. These variables will be used later in the project to hold data.

  • Within the ngOnInit() lifecycle hook, we called the cryptoData() function in line 20, which returns an observable that gets subscribed to. This allows us to return a response from the data in the process.

  • In line 21, we called the result variable using the this keyword and set it to hold the data.

  • Next, in line 22 and line 23, we called the coinPrice and coinName variables, mapped through the data, and attached the coin price and coin name to them respectively.

  • To see the results of the data in the browser, we used the console.log() function to display the data, as seen below:

Image

Data from the CoinRanking API displayed on the console.

The final thing to be done is to plot the data seen in the image above into chart.

  • As seen above, we first replaced the static data in the labels in line 12 with the coin name gotten from the CoinRanking API.

  • Next, we replaced the static data in line 15 with the price gotten from the CoinRanking API.

Now compile the project by running the ng serve --open command and see the results in the browser as seen below:

Image

Final results of the chart

Note: There is a possibility that you'll run into an error that says (Failed to load resource: the server responded with a status of 403 (Forbidden)) after compiling the project.

What you need to do is to click on the CORS Anywhere link in the console which will open up in a new tab, with a button that says Request temporary access to the demo server. Click the button and then refresh the page. The data should now reflect on the chart.

Conclusion

In this tutorial, you learned how to install and integrate the Chart.js library and a REST API in an Angular application. If you want access to the code base, you can clone the repo here on GitHub.

If you enjoyed this article, you can show your support by subscribing to my YouTube channel where I create awesome tutorials on web development technologies like JavaScript, React, Angular, Node.js, and more.

]]> <![CDATA[ How to Toggle an Element in React using React Hooks ]]> https://www.freecodecamp.org/news/toggle-elements-in-react-using-hooks/ 66d45e043dce891ac3a967d0 Mon, 07 Nov 2022 18:26:54 +0000 When building a web application, toggling an element is one of the key features you are likely to come across and may need to implement in your project.

There are various ways you can toggle an element. In this article, we will take a look at how we can implement toggle functionalities in five (5) different ways in React.

Table of Contents

You can also watch the video version of this article below, or on my YouTube channel:

How to Install and Setup the React Project

To create a React project, you need to have access to NPM (Node Package Manager). Access to NPM requires that you have Node.js installed. You can install Node by heading to the official Node.js website and downloading Node.js.

Image

Node.js official documentation

I advise selecting the "Recommended For Most Users" version. Once the installation is complete, you can open your terminal and run the commands node -v and npm -v. This gives you details on the version of Node and npm you have.

Image

Terminal showing node and npm versions

Still in your terminal, you can now install Create React App which is a platform that allows you to create a React project using the command below:

npm i create-react-app

The next step is to create a new React project from the terminal by running the command:

npm init react-app toggle
cd toggle 
code .

Above, we created a new project called toggle. Then we navigated into the newly created project directory and opened the project in our code editor. We can now begin the process of implementing the different methods of toggling an element.

How to Toggle an Element Using Logical Operators

To make sure the design of our page looks structured, we are going to set up Bootstrap 5 inside of the React project.

To do this, head to the Bootstrap 5 website and copy the CSS CDN link tag. Then go to your index.html file in your React project which can be found in the public directory. Paste the CDN link in the head section, you can see in the code below:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <!-- Bootstrap 5 CDN Link -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <title>React App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

Next, create a new folder called components inside of the src directory. Then create a new file called LogicalNot.js inside the components folder. To implement the logical not operator method, we'll implement the code below:

import React, { useState } from 'react'

const LogicalNot = () => {

  //Using Inline Function and the The Logical Not (!) to toggle state
  const [toggle, setToggle] = useState(true)

  return (
    <>
      <button 
            onClick={() => setToggle(!toggle)} 
            class="btn btn-primary mb-5">
          Toggle State
      </button>
      {toggle && (
        <ul class="list-group">
          <li class="list-group-item">An item</li>
          <li class="list-group-item">A second item</li>
          <li class="list-group-item">A third item</li>
          <li class="list-group-item">A fourth item</li>
          <li class="list-group-item">And a fifth one</li>
        </ul>
      )}
    </>
  )
}
export default LogicalNot

Inside of the LogicalNot.js file, we start off by:

  • Importing the useState hook.

  • Then we create two variables called toggle and setToggle, while setting the initial state to true.

  • Next, inside of the jsx section, we create a button that has an onClick event handler. Within this onClick handler, we create an anonymous function by using the setter we declared earlier called setToggle. We then set the argument in the anonymous function to !toggle which creates a false effect when it's clicked.

  • Finally, we toggle the element in the ul tag by wrapping it around the toggle variable and then rendering it conditionally on the page using the logical && Operator.

To display the LogicalNot.js file on the browser, head to the App.js file and import the file there as seen below:

import './App.css';
import LogicalNot from './components/LogicalNot';

function App() {
  return (
    <div className="App mt-5">
      <LogicalNot />
    </div>
  );
}

export default App;

With that, you should have the result below:

Image

Logical not operator sample

How to Toggle an Element Using the useToggle Hook

You'll start this step by creating a new file called ToggleHook.js inside the components folder. Inside this file, import the useState hook.

import React, { useState } from 'react'

Next, create a variable called useToggle which will hold the logic for the useToggle hook as you can se below:

  //Using useToggle Hook

  const useToggle = (initialState) => {
    const [toggleValue, setToggleValue] = useState(initialState);

    const toggler = () => { setToggleValue(!toggleValue) };
    return [toggleValue, toggler]
  };

  • Above, we created a callback function and then gave it a parameter called initialState.

  • Next, we used the useState hook to create a getter and a setter called toggleValue and setToggleValue, respectively. The useState hook takes the initialState parameter we created earlier which sets the initial value as false by default.

  • Finally we then created a variable called toggler. This variable holds an anonymous function that contains our useState variables and then sets the results to the opposite value when clicked. We then returned both the toggleValue and toggler variables in an array.

With this we can now use the useToggle hook to create a getter and a setter variable as you can see below:

  const [toggle, setToggle] = useToggle();

We can now implement the logic of the useToggle hook in the jsx part of our code:

    return (
    <div>
      <button 
            onClick={setToggle} 
            class="btn btn-secondary mb-5">
          Toggle State
      </button>

      {toggle && (
        <ul class="list-group">
          <li class="list-group-item">An item</li>
          <li class="list-group-item">A second item</li>
          <li class="list-group-item">A third item</li>
          <li class="list-group-item">A fourth item</li>
          <li class="list-group-item">And a fifth one</li>
        </ul>
      )}

    </div>
  )

  • Above, we created a button that contains an onClick event handler using the setToggle setter previously declared above.

  • Then we rendered the elements based on the boolean condition of the toggle variable when it gets clicked.

With that, we should have the result below:

Image

useToggle sample

How to Toggle an Element Using the Ternary Operator

The ternary operator is a JavaScript operator that takes in three different operations, which are:

  • A condition

  • A question mark (?) to execute a condition if true

  • A colon (:) to execute a condition if false

To implement this method, you'll start by importing the useState hook:

import React, { useState } from 'react'

Then you need to create two variables using the useState hook and setting the default value to true:

  const [toggle, setToggle] = useState(true);

Next, create a variable called handleClick that holds a callback function. Within this function, call the setToggle setter and then pass in !toggle to return an opposite value when clicked, as you can see below:

  const handleClick = () => {
    setToggle(!toggle);
  };

Finally, you can now render the logic of the variables you created in your jsx:

  return (
    <div>
      <button 
      onClick={handleClick} 
      class="btn btn-info mb-5">
      Toggle State
      </button>

      {toggle ?
        <ul class="list-group">
          <li class="list-group-item">An item</li>
          <li class="list-group-item">A second item</li>
          <li class="list-group-item">A third item</li>
          <li class="list-group-item">A fourth item</li>
          <li class="list-group-item">And a fifth one</li>
        </ul>
        :
        <></>
      }
    </div>
  )

  • Above we created a button that uses an onClick event handler to reference the handleClick variable we created earlier.

  • Then we can render the elements by using the toogle variable condition, as well as the question mark (?) which displays elements if the toggle variable is set to true, or displays an empty jsx fragment by using the colon (:) if the toggle variable is set to false.

With that, we should have the result below:

Image

Ternary operator sample

How to Toggle an Element Using the If/Else Statement

The If/Else statement is a conditional statement used to perform different actions based on certain parameters. The if statement executes a certain condition if it is true, and the else statement executes when the condition is false.

To see the if/else statement in action, let's begin by importing the useState hook:

import React, { useState } from 'react'

Next, create the getter and setter variables and then set the default value to true:

 const [toggle, setToggle] = useState(true);

Next, create a variable called handleClick that holds the callback function. Within this function, call the setToggle setter and then pass in !toggle to return an opposite value when clicked, as you can see below:

  const handleClick = () => {
    setToggle(!toggle)
  };

You can now display the elements by using the toggle getter in the jsx as you can see below:

if (toggle) {
    return (
      <div>
        <button onClick={handleClick} class="btn btn-dark mb-5">Toggle State</button>
        <ul class="list-group">
          <li class="list-group-item">An item</li>
          <li class="list-group-item">A second item</li>
          <li class="list-group-item">A third item</li>
          <li class="list-group-item">A fourth item</li>
          <li class="list-group-item">And a fifth one</li>
        </ul>
      </div>
    )
  } else {
    return <button onClick={handleClick} class="btn btn-dark mb-5">Toggle State</button>
  }

  • In the jsx, we wrapped the entire element around the if/else statement.

  • Within the if statement, we rendered the elements that contain the list items on the page when the toggle is set as true.

  • In the else block, however, when the toggle is set to false, only the button element gets returned.

With that, we get the result below:

Image

If/else statement sample

How to Toggle an Element Using CSS Conditional Styling

Conditional styling is one of the ways you can use to manipulate DOM elements in React based on a specific condition. As we've done previously, let's start by importing the useState hook in React:

import React, { useState } from 'react'

Next, set up your useState hook creating the required variables:

  const [toggle, setToggle] = useState(true);

Then create the function that helps set the value of your opposite state when clicked:

  const handleClick = () => {
    setToggle(!toggle);
  };

With this you can now configure the conditional styling in the jsx section of your code:

 return (
    <div>
      <button onClick={handleClick} class="btn btn-warning mb-5">Toggle State</button>

      <ul class="list-group" style={{ display: toggle ? 'block' : 'none' }}>
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
        <li class="list-group-item">A fourth item</li>
        <li class="list-group-item">And a fifth one</li>
      </ul>

    </div>
  )

  • Above, we started by creating the button that contains the onClick event handler called handleClick as created earlier.

  • Then we used the style attribute in the ul tag to conditionally set the display to block when the toggle variable is true. If the toggle variable is false, we set the display to none. This is possible through the ternary operator.

The result looks like this:

Image

Conditional styling sample

Conclusion

In this tutorial, you learned the various ways you can toggle elements in a React application. If you want access to the code base, you can clone the repo here on GitHub.

Also, if you enjoyed this article, you can kindly show your support by subscribing to my YouTube channel where I create awesome tutorials on web development technologies like Angular, React, JavaScript, Html, CSS, and many more concepts.

]]> <![CDATA[ How to Integrate the Material UI Data Grid in React Using Data from a REST API ]]> https://www.freecodecamp.org/news/how-to-integrate-material-ui-data-grid-in-react-using-data-from-a-rest-api/ 66d45e037df3a1f32ee7f7f7 Thu, 06 Jan 2022 16:30:56 +0000 Material UI's Data Grid is a powerful and flexible data table. It makes it easy for you to display data and perform out of the box functionalities such as editing, sorting, filtering, pagination and more.

In this article, we'll discuss why you should use the Data Grid in Material UI in your project. And then we'll also go through how to install and set up the Data Grid, consume and integrate a RESTful API, and enable pagination as well as sorting and filtering.

Table of Contents

Watch the video version of this article below, or on my YouTube channel:

Introduction to Data Grid

According to the Material UI documentation, Data Grid is a

"fast and extendable React data table and React data grid. It's a feature-rich component available in MIT or Commercial versions".

Basically, Data Grid in Material UI comes with some features like editing, sorting, filtering, updating, pagination, exports and so on by default.

The team also has future plans of implementing additional features like Excel export, Range selection, Group, Pivot, Aggregation.

For the purpose of this tutorial, we will be implementing some of the features of the Data Grid with a public REST API called JSONPlaceholder

Why use the Material UI Data Grid

There are some important reasons you might want to use the Material UI Data Grid:

  • Accessibility

  • User Interaction

  • Data Presentation

Accessibility

The Data Grid offers accessibility features such as cell highlighting. That is, every cell is accessible using the keyboard.

It also provides additional features such as keyboard navigation by using certain keys on the keyboard to change the focus of the table cells, along with density properties to determine the row and column height on the table.

User Interaction

In terms of interaction, the Data Grid provides an inbuilt feature such as row selection by default. This allows the user to select certain rows on mouse click or using certain keyboard shortcuts.

The Data Grid in Material UI supports single and multiple row selection, ability to disable selection certain rows or all rows, checkbox selection and much more.

Data Presentation

The Data Grid provides an inbuilt feature that allows data to be exported to CSV format.

Also, data can be manipulated by clicking a column header. This will trigger the sorting and filtering functionalities.

Another basic feature that comes by default is scrolling, which does not occur in a normal table by default.

How to Install and Setup React and Material UI Data Grid

To create a new project in React, you need to have Node.js installed. This will give us access to npm in our terminal. We can then install and use Create React App using npm to create our project, by running the command below:

npm i create-react-app

The next step is to create a new React project from the terminal by running the command below:

npx create-react-app data-grid 
cd data-grid 
npm start

Above we created a new project called data-grid. Then we navigated into the newly created project directory and started the project with npm.

By default, our project will be running on localhost:3000 in the browser.

Finally, we need to install two packages which are Material UI and the Data Grid using the command below:

npm install @mui/x-data-grid @mui/material

API Integration and Consumption

To integrate our API, we need to create a new file and folder in our src directory that's created for us when we generated our project with Create-React-App. We will call this new folder Table and the file will be called DataGrid.js.

In the end, our folder structure should look something like this:

> src 
    > Table 
        > DataGrid.js 
.gitignore 
package-lock.json 
package.json 
README

In the DataGrid.js file, we will use a functional component. In this functional component, we will implement some of the following default features in React:

  • useState hook

  • useEffect hook

  • The Fetch API

The useState Hook

The useState hook in React is an inbuilt function that helps us track state in a functional component.

The useEffect Hook

The useEffect hook allows us to handle side effects in our functional component. Some of these side effects could include things like updating the DOM, fetching data from a RESTful API, timer events, and so on.

The Fetch API

The Fetch API in JavaScript allows web browsers to make HTTP requests to web servers. The request can be of any APIs that send and receive data in JSON or XML format.

Now that we've explored the concept of hooks and the Fetch API, let's generate a boilerplate functional component in our DataGrid.js file:

import React from 'react'

const DataGrid= () => {
  return (
    <div>

    </div>
  )
}

export default DataGrid

The next step is to consume the REST API from JSON placeholder.

To do that, the first thing we need to do is to import the useState and useEffect hooks:

import React, { useState, useEffect } from 'react'

Then we create a variable using the useState hook:

const [tableData, setTableData] = useState([])

The tableData above serves as a getter, while the setTableData serves as a setter.

Finally, to access our data we will use the useEffect hook and the Fetch API:

useEffect(() => {
  fetch("https://jsonplaceholder.typicode.com/posts")
    .then((data) => data.json())
    .then((data) => setTableData(data))
}, [])
 console.log(tableData)

Above, we can see that inside the useEffect hook, we did three things:

  • First, inside the useEffect hook, we used Fetch to consume the JSON placeholder REST API

  • Then we converted the response we got into JSON format

  • Lastly, we passed the data from our response to the setter we created earlier called setTableData

To be sure we got the right response, we logged the data we got into the console. To see the results in the console, we need to import our DataGrid.js inside our App.js file:

import './App.css';
import DataGrid from './Table/DataGrid';

function App() {
  return (
    <div className="App">
      <DataGrid />
    </div>
  );
}

export default App;

Then we get the result below, which consists of a list of 100 objects in an array:

Image

JSON Data in the Console

How to Display the API Results in the Material UI Data Grid

To display our API results in the Material UI Data Grid, we need to import the Data Grid package into our DataGrid.js file:

import { DataGrid } from '@mui/x-data-grid'

We then set up the configuration for the header section of our Data Grid table:

const columns = [
  { field: 'id', headerName: 'ID' },
  { field: 'title', headerName: 'Title', width: 300 },
  { field: 'body', headerName: 'Body', width: 600 }
]

As you can see above, it is in an array of objects and it contains an id, title and a body, which is in accordance with the results we got from our REST API.

Finally, we bring in the DataGrid component into our return statement:

<div style={{ height: 700, width: '100%' }}>
     <DataGrid
       rows={tableData}
       columns={columns}
       pageSize={12}
     />
   </div>

Above, we have three properties inside the DataGrid component:

  • The first one is the rows property. What we did with the row property was to pass in the results we got from our REST API, which is contained in the getter called tableData

  • The second property is called columns. This is the array of objects that contains the header of our DataGrid that include the id, title and body.

  • The last property is the pageSize. This helps us to set a limit to the amount of data that can be displayed at once. As you can see, we set this to 12 – the rest of the result is then paginated by default.

In the end, our DataGrid.js file should look something like this:

import React, { useState, useEffect } from 'react'
import { DataGrid } from '@mui/x-data-grid'

const columns = [
  { field: 'id', headerName: 'ID' },
  { field: 'title', headerName: 'Title', width: 300 },
  { field: 'body', headerName: 'Body', width: 600 }
]

const DataGrid = () => {

  const [tableData, setTableData] = useState([])

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((data) => data.json())
      .then((data) => setTableData(data))

  }, [])

  console.log(tableData)

  return (
    <div style={{ height: 700, width: '100%' }}>
      <DataGrid
        rows={tableData}
        columns={columns}
        pageSize={12}
      />
    </div>
  )
}

export default DataGrid

The results in the browser should also look like the image we have below:

Image

Data Grid Table Result

One awesome thing to note in the result of our image above is that, we have an out-of-the-box sorting and filtering functionality when we click on the header section(id, title, body) of our data table.

Conclusion

In this article, we learned about DataGrid in Material UI, React Hooks, REST API consumption and much more.

Also, the link to the code of this article can be found on GitHub.

If you enjoyed this article, show your support by subscribing to my YouTube channel where I create awesome tutorials on web development technologies like JavaScript, React, Angular, Node.js, and more.

If you have any feedback or question on this post or other programming related questions, you can find me on Twitter @thecodeangle.

]]>