<![CDATA[ Angular - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ Angular - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ Eleventy Sun, 10 May 2026 22:20:17 +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 Use @Input() to Read Angular Route Parameters ]]> https://www.freecodecamp.org/news/use-input-for-angular-route-parameters/ 66d45e134a7504b7409c3368 Mon, 10 Jul 2023 21:18:44 +0000 By Deborah Kurata

One of the new features in Angular v16 is automatic route parameter mapping using the @Input() decorator.

What does that mean? Well, you may have code that reads route parameters using the Activated Route service, like this:

  private route = inject(ActivatedRoute);

  ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id');
    if (id) {
      console.log(this.id);
    }
  }

We first inject the Activated Route service. Then we get the route parameter from that activated route snapshot, dotting down to the get() method and passing in the name of the route parameter.

In Angular v16 and later, our code can instead read route parameters like this:

  @Input() id = '';

  ngOnInit(): void {
    console.log(this.id);
  }

Here we use an input property defined with the @Input() decorator. Angular automatically reads the route parameter and assigns it to the input property. This syntax is much shorter and easier!

Let's walk through an example: first using the Activated Route service, then trying out the new input property syntax to read route parameters.

You can watch the associated video here for a demonstration:

How to Configure a Route with a Parameter

Whether we use Activated Route or an input property, we first need to configure our route with a parameter.

As an example, let's say we have a Product List component that displays a list of products as shown in Figure 1. When the user clicks a product name, we load the Product Detail component to display detail for that product (Figure 2).

Image Figure 1. List of products (Product List component)

Image Figure 2. Detail for product with an id of 5 (Product Detail component)

To achieve this feature, the Product List component adds the id of the selected product to the route as a parameter. This is shown in the address bar in Figure 2. The Product Detail component reads that id from the route parameter and uses it to display the selected product's detail.

The configuration for the product detail route looks like this:

  { path: ':id', component: ProductDetailComponent }

We identify a route parameter by adding a colon before the parameter name, which in this example is id. Anywhere we reference this parameter we'll use this name.

The product detail route is activated when the user clicks on a product link in the Product List component. The code for that link uses the routerLink directive to set the id parameter:

 <a [routerLink]="[product.id]"> {{ product.productName }} </a>

When the user clicks on this link, the routerLink adds the product's id to the URL. The router uses the route configuration to find a matching route path and routes to the Product Detail component.

Code in the Product Detail component then reads the parameter from the URL and displays the product's detail.

How to Read Route Parameters (Activated Route)

One technique to read the parameter from the URL uses Angular's Activated Route service.

import { Component, OnInit, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';


  private route = inject(ActivatedRoute);

  ngOnInit(): void {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    if (id) {
      this.productDetailService.setSelectedProductId(id);
    }
  }

We first inject the Activated Route service using Angular's new inject() keyword. Alternatively, we could use the constructor to inject this service dependency.

To read the parameter when the Product Detail component first loads, we use the OnInit lifecycle hook. We declare a constant for the parameter. Then we set that constant using the Activated Route service. We access the route snapshot's paramMap, and call its get() method, passing in the name of the parameter to get. This name must match the parameter name we defined in the route configuration.

Route parameters are strings so the get() method returns a string, or null if the parameter isn't found. In this example, the product ids are numbers. So we use the Number() constructor to create a number from the string.

If the code successfully reads the id from the route, we set that id into the Product Detail service. The Product Detail service then finds the product with the defined id. Our component binds to the resulting product and displays that product's detail.

We can simplify this code if we use the @Input() decorator instead.

How to Start Using @Input() for Route Parameters

The first thing we need to do, and the step I so often forget, is to let Angular know that we want to use input properties to read route parameters. We do that in the application configuration.

How we do that depends on the type of bootstrapping our application uses.

With standalone component bootstrapping, we bootstrap an application like this:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

Then, in the appConfig, we provide the routes like this:

import { ApplicationConfig } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';

import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideRouter(routes, withComponentInputBinding())
  ]
};

The provideRouter() function sets up the providers for the router. We pass in the routes and withComponentInputBinding(). It's the withComponentInputBinding() that let's Angular know that we want to use input properties to read route parameters.

If you are instead using NgModule bootstrapping, the code looks something like this:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

In this example, theAppModule imports the AppRoutingModule which looks like this:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { WelcomeComponent } from './home/welcome.component';

@NgModule({
  imports: [
    RouterModule.forRoot([
      { path: 'welcome', component: WelcomeComponent },
      { path: '', redirectTo: 'welcome', pathMatch: 'full' },
      {
        path: 'products',
        loadChildren: () =>
          import('./products/product.module').then(m => m.ProductModule)
      },
      { path: '**', redirectTo: 'welcome', pathMatch: 'full' }
    ], { bindToComponentInputs: true })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In the RouterModule.forRoot(), we set bindToComponentInputs to true to let Angular know that we want to use input properties to read route parameters.

We've now enabled the automatic route parameter mapping using input properties.

How to Read Route Parameters (@Input)

We add an input property using the @Input() decorator.

  @Input() id = '';

We can name the input property the same as the route parameter, which in this example is id. Route parameters are strings, so we set the initial value to an empty string.

If we want to use a different property name, such as productId, we can. But then we need to pass the route parameter name to the @Input() decorator, like this:

@Input('id') productId ='';

That way, Angular can match up the route parameter to the appropriate input property.

We can then simplify the OnInit lifecycle hook code like this:

  ngOnInit(): void {
    if (this.id) {
      this.productDetailService.setSelectedProductId(Number(this.id));
    }
  }

Since we're using an input property, we no longer need the Activated Route. We can simply access the input property directly. Since the setSelectedProductId() method is expecting a number, we add the Number() constructor around the id to convert it to a number.

How to Transform Input Properties

Starting with Angular v16.1, the @Input() decorator provides a transform function. We use the transform function to perform a transformation or execute other logic when an input property changes.

To further simplify our code, Angular introduced two built-in transformation functions: booleanAttribute and numberAttribute.

For our case, we want to transform the route parameter string, to a number. Using a transformation function, our code then looks like this:

 import { Component, OnInit, Input, numberAttribute } from '@angular/core';


  @Input({transform: numberAttribute}) id = 0;

  ngOnInit(): void {
    if (this.id) {
      this.productDetailService.setSelectedProductId(this.id);
    }
  }

We pass an object to the @Input() decorator and set the transform function to numberAttribute. Since the string route parameter is then transformed to a number, we change the initial value to 0 in place of an empty string ''. And now that the resulting id is a number, we no longer need to convert it ourselves with the Number() creation function.

Why Use Route Parameters?

One question I always like to ask myself is "why". Why do we need route parameters at all? Couldn't the Product List component store the id in a property of a service? Then the Product Detail component could read that id from the service instead of from the route.

One key reason is that by appending the id to the URL, we get deep linking. Deep linking allows the user to save or share the URL and have it automatically directly link to a specific product.

Say that your birthday is coming up and you send a friend an Amazon link. That link wouldn't be useful if it didn't navigate directly to a specific product.

Use deep linking any time you want to allow your users to save or send direct links.

Wrapping Up

Starting with Angular v16, we can use an input property, defined with the @Input() decorator, to access route parameters. This gives us a shorter and easier syntax. We no longer need to work with Angular's Activated Route service.

But don't forget to enable this functionality!

  • If you are using standalone bootstrapping, add withComponentInputBinding() to provideRouter().
  • For classic NgModule bootstrapping, set bindToComponentInputs to true in RouterModule.forRoot().

To see these concepts in action, check out the demo provided in this video:

‌‌

]]> <![CDATA[ How to Use a Postman Mock Server with Angular ]]> https://www.freecodecamp.org/news/how-to-use-a-postman-mock-server-with-angular/ 66b9fa17d6f1a89d918606af Wed, 28 Jun 2023 21:47:41 +0000 New front end features often require back end data support – especially where new endpoints are concerned.

For example, an application that needs an authenticated user experience may need a new /authenticate endpoint.

If for any reason endpoint development is stalled or lags behind, despite the sprint planning, you will be faced with the question: do you build with or without the data?

Fortunately, there is a third option: building with mock data  (which could work depending on your use case). This option is especially beneficial when the feature is a must-have by the end of a sprint.

Some other pros of having mock data handy include:

  • Better testing with different API response data
  • Secure testing with de-identified data
  • Re-usable test data
  • Smoother demos — just in case the real server decides to be offline

There are multiple tools that can help with creating and using mock data, such as Postman and its mock servers. You can also integrate these tools in front end applications for use in development.

A Postman mock server is straightforward to set up and integrate with an Angular application – particularly, when it is paired with an Angular interceptor. It might not be for every use case, but it offers a convenient way of working with mock data.

What is a Postman Mock Server?

Postman is a collaborative API platform that is designed to support the complete lifecycle of APIs. It provides tools and integrations that help with designing, documenting, testing, monitoring, sharing, and using APIs.

A Postman Mock Server is a dummy API server that accepts requests to endpoints you create in a collection and returns the responses you specify in examples. It has its own base URL and an optional API key for added security.

A Postman collection is a logical grouping that helps organize related requests, while a Postman example is an instance of a request in action. It is made up of the request and an expected response.

The Postman documentation provides more comprehensive details about collections and examples if you want to learn more.

Once you’ve decided to work with a Postman Mock Server, you then need to integrate it with the application in such a manner as to not:

  • Disrupt ongoing development
  • Break the application

There are two popular ways that come to mind:

  1. Using a proxy
  2. Using a HTTP Interceptor

The major difference between these two options is that the proxy is applied at build-time, while the interceptor is applied at run-time.

What is a Proxy?

A proxy server is a software tool that often acts as an intermediary between a client and a server. It receives requests from the client, modifies, and diverts some of them to other servers.

Angular uses Webpack's dev-server as a proxy. It can be configured to divert some requests to a different server, through the Angular CLI. This is what makes it a viable solution to use with a Postman mock server in development.

What is an Angular HTTP Interceptor?

Angular's HttpInterceptor is a lightweight class that can tap into an outgoing request or an incoming response. It can be used to inspect a request or transform parts of it, like the URL or headers. If you use an interceptor instead of a proxy:

  • You can access run-time environment variables  to determine whether to divert a request to the mock server
  • You will not need to re-serve the application after a change to the interceptor — code changes trigger reloads (if live reloads are enabled)

The proxy and the interceptor can essentially do the same thing: tap into and transform outgoing requests. However, each option has its own pros and cons.

Interceptor vs Proxy

  • An interceptor will require relatively less set-up than a proxy
  • A proxy will necessitate setting build-time environment variables in the system or a .env file (an interceptor may need this if an API key is required)
  • A change to the proxy will require the application to be re-served while a change to an interceptor will trigger a reload
  • If you are unfamiliar with setting up a proxy in Angular, there is an expected gentle learning curve. However, there is an even gentler learning curve when creating an interceptor since it's just a class

Using an interceptor seems like a more straightforward option for this simple use case.

How to Create a Postman Mock Server

The first step to using a mock server is to create one. First, ensure you have a Postman account and a workspace. You can create both from the platform's website. A Postman workspace is like a dashboard that organizes your work, tools, and collaborators.

Then, create a Postman collection to group and organize the requests you would like the mock server to handle.

Next, add a request to the collection. It can be any type of CRUDL request. Use your actual server's URL – like you would when testing a real endpoint.

Here's a snapshot of a workspace with a collection and a GET request:

Image A collection with a request

Next, test your endpoint by sending the request. Do this until you get a successful response back then save the response as a Postman example. You can update the example by removing any sensitive data like user information or PII.

Here's a snapshot of an updated example. Some user information has been replaced with some mock data using Postman variables.

Image An updated example for a request

Finally, create a Postman mock server from the collection you just created. You can do this by clicking on the ellipsis beside the collection and selecting Mock collection (at least, at the time of this writing). Here's a snapshot of these steps.

Image How to create a mock server from a collection

You will be presented with a simple form that will allow you to configure the mock server.

For example, you can rename the mock server or make it private–this means it will need an API key.

Once the mock server is configured, click Create Mock Server . You will then be provided with a URL for the server. Copy the URL.

To associate the mock server with your requests and examples, go into the collection and update the URLs. Replace the base URLs of the requests and examples with the copied mock server's base URL. Send a few requests within Postman to verify that your set up was successful.

Note:

  • If your API is private, you can generate an API key from the settings in your account
  • Your mock server keeps a log of the requests it receives which you can view in your workspace

After creating the mock server, create the interceptor in your Angular application.

For more information, you can refer to the documentation.

How to Create an Angular HTTP Interceptor

An interceptor is an injectable class that implements Angular’s HttpInterceptor interface.

This interface has one required method — the intercept method. This method primarily does one thing: it takes request and handler arguments and passes the request to the next method of the handler. Requests can be altered before they are passed on to the handler.

@Injectable()
export class ApiInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<unknown>, next: HttpHandler):
    Observable<HttpEvent<unknown>>
  {
    return next.handle(req);
  }
}

To use a created interceptor in the application, add it to the providers array at the same level where the HttpClientModule is imported:

[{ provide: HTTP_INTERCEPTORS, useClass: ApiInterceptor, multi: true }]

This is so it can be managed by Angular’s Dependency Injection system as optional dependencies of the HttpClient service. The HttpClient service is used for making HTTP requests.

Note that when it comes to using interceptors, order is important.

For example, if you provide another interceptor that adds authentication headers after an API interceptor that adds an API key header, the request may send unnecessary headers to the mock server.

Finally, integrate the mock server with your application.

For more information, refer to the documentation.

How to Use an Angular Http Interceptor with a Postman Mock Server

First, specify an environment variable to toggle between mock data and real data. Environment variables in Angular are primarily defined as TypeScript variables in environment files:

// environment.ts file

export const environment = {
  production: false,
  useMock: true,
  postman: {
    baseUrl: "postman-mock-server-url",
    apiKey: "optional-mock-server-api-key"
  }
};

At least for framework versions <15.

Then, use the environment variable in the interceptor. Where you can clone an outgoing request and update its URL before passing it to the handler:

@Injectable()
export class ApiInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<unknown>, next: HttpHandler):
    Observable<HttpEvent<unknown>>
  {
    if (environment.useMock) {
      // optional headers
      const headers = new HttpHeaders({
        "x-api-key": "my-api-key"
      });
      const cloneReq = req.clone({ url: this.getUpdatedURL(req.url), headers });
      return next.handle(cloneReq);
    }
    return next.handle(req);
  }
}

Conclusion

To summarize, using mock data in applications, especially data-intensive ones, can be cumbersome. But they do have their merits.

Reusable mock data helps make testing better and more secure particularly if the data is varied and de-identified. Furthermore, they help progress development while real data are unavailable.

There are a couple of tools that help with creating and managing mock data through mock servers, like Postman.

These tools are not only nifty for API and back end software engineers, but also for front end software engineers.

]]> <![CDATA[ How to Hide Your Angular Properties – # vs private Explained ]]> https://www.freecodecamp.org/news/javascript-vs-typescript-private-in-angular-explained/ 66d45e0c182810487e0ce13d Tue, 20 Jun 2023 20:39:45 +0000 By Deborah Kurata

Have you noticed a hash symbol showing up in Angular code samples? If not, you may see it soon. What is the purpose of the # and when should you use it?

The # symbol was recently added to JavaScript to denote private class properties. Making a class variable private means that the variable can only be accessed within its class. That allows us to encapsulate data we only want to access within a service.

But don't we already have a private accessor for our class fields? Yep!

Then why do we need the new hash syntax?

Let's take a look at the private accessor first, then examine the # syntax and why it is a better choice in our Angular applications.

You can watch the associated video here for a demonstration:

The Danger of Public Class Properties

Let's start by creating a property in a service and attempt to access it from our component. For this example, we have a Product service and a Product component.

In the Product service, we create a property for the URL that we'll use to get our product data. And a products property to hold our retrieved array of products.

// Product Service
@Injectable({
  providedIn: 'root'
})
export class ProductService {
  productUrl = 'api/products';
  products = [];

}

To verify the value of the URL, let's create a method to log it:

// Product Service
logUrl() {
  console.log('Url:', this.productUrl);
}

Then we'll call that method in the Product service constructor:

// Product Service
constructor() {
  this.logUrl();
}

By default, variables we define in a class are public, meaning that any other code in our application can access them. So we should be able to access our Product service properties from our component.

Let's give it a try. In the Product component, we first inject the service. In this example, we use the new inject function for dependency injection instead of the constructor. And add inject to the import statement from @angular/core.

Then we add a constructor. And because by default any property or method of a class is public, we can change the URL that we defined in the service. For confirmation, we'll call the service method to log the URL.

// Product Component
productService = inject(ProductService);

constructor() {
  this.productService.productUrl = `api/nefarious`;

  this.productService.logUrl();
}

If we run the application and open the developer tools, we first see the service log the URL, then we see the component's changed URL (Figure 1).

Console log includes api/products and api/nefarious Figure 1. Resulting console output.

Well...that's not good. Our component was able to change the URL defined in our service.

TypeScript's Private Accessibility Feature

To better protect our service properties from being modified outside of the service, we use private accessibility.

Private accessibility is a feature of TypeScript. It marks a class property or method so that it is only accessible from within the class. The property or method is not available from any other component or service.

To use private accessibility, we add the private keyword in front of the variable name.

// Product Service
private productUrl = 'api/products';

Since we are currently modifying this property in the component, the component code now generates an error: Property 'productUrl' is private and only accessible within class 'ProductService'. Great! Our component can no longer access the private property from our service.

By adding the TypeScript private accessibility keyword in front of a property in the service, the variable is only accessible from that service.

But, going back to the component, what if we try to do something like this:

// Product Component
constructor() {
  for (let i in this.productService) {
    console.log('properties:', i);
  }

  this.productService.logUrl();
}

The for...in loop iterates over the properties of an object. In this example, we display each property to the console. The result is shown in Figure 2:

Console log includes productUrl and products Figure 2. Resulting console output

Notice that it displays both our public and private properties. Now that we can see the name of the private property, we can use it to update that private property.

// Product Component
constructor() {
  for (let i in this.productService) {
    console.log('properties:', i);
  }

  this.productService['productUrl']= 'api/nefarious';
  this.productService.logUrl();
}

Oops! We've again modified our service property from our component. Our private property isn't so private.

Why is that? It's because the private keyword is part of TypeScript, not JavaScript. That means that the private accessibility is only enforced during development, as part of type checking, and during compilation. We get notifications during development and compilation that we can't access the private property from outside its class.

But when our TypeScript code is transpiled to JavaScript and executed, the private keyword is gone. That means the JavaScript runtime constructs such as our for...in loop or simple property lookup, can still access a property or method defined with the private keyword. In other words, the component can access the private properties in our service at runtime. Yikes!

JavaScript's Private Class Members (#)

Using the JavaScript # syntax solves that problem. Recently, JavaScript added private class properties and methods, denoted with a #. Since the # is part of JavaScript, it denotes our properties and methods as private during development, compilation, and at runtime.

In the Product service, let's remove the private keyword and add #. The # is a prefix on the variable itself, and becomes part of the variable name. So we need to change the variable name wherever we access it, such as in our logUrl method.

// Product Service
@Injectable({
  providedIn: 'root'
})
export class ProductService {
  #productUrl = 'api/products';
  products = [];

  constructor() { 
    this.logUrl();
  }

  logUrl() {
    console.log('Url:',this.#productUrl);
  }
}

We now see an error where we access the property in the Product component: Property 'productUrl' does not exist on type 'ProductService'. Did you mean '#productUrl'?

We can try changing our property lookup code in the component to include a # as well.

// Product Component
constructor() {
  for (let i in this.productService) {
    console.log('properties:', i);
  }

  this.productService['#productUrl']= 'api/nefarious';
  this.productService.logUrl();
}

But the property is still not found: Property '#productUrl' does not exist on type 'ProductService'. The private property in our service is now correctly hidden from our component. We'll need to delete the property lookup line that accesses #productUrl for our code to compile successfully.

Looking at the console (Figure 3), notice that our for...in loop now finds the public products property, but not the private productsUrl property. Our private property is private and hidden, correctly encapsulated in our service.

Console log includes products, not productUrl Figure 3. Resulting console output

Wrapping Up

As Angular developers, we've been using the Typescript private accessibility keyword to make properties or methods private. But that only protects the property at development and compile type, not runtime.

Now we can use the JavaScript private class property syntax (denoted with the # symbol) to make private properties and methods truly private and hidden from other parts of our code.

To see these concepts in action, check out the demo provided in this video:

]]> <![CDATA[ Front End JavaScript Development Handbook – React, Angular, and Vue Compared ]]> https://www.freecodecamp.org/news/front-end-javascript-development-react-angular-vue-compared/ 66d45d5c3a8352b6c5a2a9f5 Thu, 08 Jun 2023 13:57:21 +0000 Frontend frameworks are indispensable in web development. They provide structured approaches and pre-defined components to streamline the coding process.

These tools can also help boost productivity by offering reusable components and abstracting complex tasks like DOM manipulation and state management. This allows developers to focus on application logic rather than writing repetitive code.

Frameworks promote code maintainability through modular development, making it easier to modify or replace individual components. They also make collaboration easier as multiple developers can work simultaneously on different parts of an application.

Benefits of Using Libraries and Frameworks

With vibrant developer communities, these frameworks offer extensive support, tutorials, and documentation. Leveraging frontend frameworks empowers developers to create beautiful and highly functional web applications that meet modern user expectations.

Frontend frameworks provide numerous benefits for beginners in web development as well. They offer a structured approach and pre-built components, simplifying the development process and saving time.

Beginners can leverage the power of these frameworks to create visually appealing and interactive user interfaces without needing to start from scratch.

The extensive community support and resources available for popular tools like React, Angular, and Vue make it easier for beginners to learn and grow their skills. By embracing frontend frameworks, beginners can accelerate their learning curve, and build impressive web applications.

Learn Vanilla JavaScript First

Before delving into JavaScript frameworks, it is crucial for you to grasp the basics of plain JavaScript. Understanding the fundamentals of JavaScript, such as variables, functions, and control structures lays a strong foundation for learning and utilizing frameworks effectively.

By learning the core concepts of JavaScript, you also gain insights into how the language works and can solve problems without relying solely on the abstractions provided by frameworks. This knowledge empowers you to write cleaner, more efficient code and arms you with the ability to customize and extend frameworks to suit their specific needs.

Understanding JavaScript also enables you to troubleshoot issues, comprehend error messages, and make informed decisions when working with frameworks. By mastering the basics, you can unlock the full potential of JavaScript frameworks and leverage their power to create dynamic, interactive web applications.

Table of Contents

What is React?

Image

React Logo

React is a popular JavaScript library used for building user interfaces. It follows a component-based architecture, where UI elements are divided into reusable components.

React utilizes a Virtual DOM, which is a lightweight representation of the actual DOM, to efficiently update and render components. This approach allows for fast and responsive user interfaces.

React promotes a one-way data flow, making it easier to manage application state and update UI components efficiently. It provides lifecycle methods that allow developers to perform actions at different stages of a component's lifecycle, such as fetching data, handling events, and updating the UI accordingly.

It has a robust ecosystem with various libraries and tools that extend its capabilities. These include React Router for routing, Redux for state management, and React Native for building native mobile applications. This ecosystem offers solutions to common development challenges and facilitates rapid development.

React's component-based architecture, Virtual DOM, JSX syntax, and extensive ecosystem make it a powerful choice for building dynamic and reusable user interfaces. Understanding the basics of React sets the foundation for exploring its features and capabilities in more depth.

React Setup: Installation, Project Creation, and Server Start

To get started with React, you need to set up your development environment by installing React, creating a new project, and starting the development server.

Below outlines the steps to install React, create a new React project, and start the development server:

Step 1: Install Node.js and npm (if not already installed)

Step 2: Open your terminal or command prompt.

Step 3: Install the Create React App CLI globally by running the following command:

Image

Install React App

npm install -g create-react-app

Step 4: Create a new React project by running the following command:

Image

Create React app project

npx create-react-app my-react-app

Note: Replace my-react-app with the desired name of your project.

Step 5: Once the project is created, navigate to the project directory by running the following command:

Image

Change Directory

cd my-react-app

Step 6: Start the development server by running the following command:

Image

Starting React Development Server

npm start

This will start the development server, and you can view your React app by visiting http://localhost:3000 in your browser.

These steps will install React, create a new React project with Create React App, and start the development server. You can then begin building your React application.

React and its Key Features

React's many features make it one of the most popular choices among developers. Its range of powerful features empowers developers to build dynamic and interactive user interfaces in a flexible and efficient way.

Component-Based Architecture

React follows a component-based approach, where UI elements are broken down into reusable and self-contained components. This modularity promotes code reusability, maintainability, and scalability.

In React, the component-based architecture is a fundamental concept that promotes code reusability and modular development. Components are the building blocks of a React application, and they can be thought of as self-contained, reusable pieces of code that encapsulate both the UI (User Interface) and the logic.

Check out this snippet of code that exemplifies the creation of a simple functional component in React:

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

In the code snippet above, we define a functional component called Greeting. This component takes in a prop called name and renders a greeting message with the value of the name prop.

The component-based architecture allows you to break down your application into smaller, reusable components. Each component can have its own state, props, and lifecycle methods, making it easier to manage and maintain your codebase. Components can be composed and nested together to create complex user interfaces.

By separating your application into components, you can achieve better organization, code reusability, and maintainability. You can easily reuse components across different parts of your application or even in different projects. This approach also enables a more efficient development workflow, as components can be developed and tested independently.

With the component-based architecture in React, you have the flexibility to build modular, scalable, and maintainable applications, making React a powerful tool for front-end development.

Virtual DOM

React utilizes a Virtual DOM, which is a lightweight representation of the actual DOM. By using the Virtual DOM, React efficiently updates and renders components, resulting in faster and smoother user interfaces.

One of the key features of React is its use of a Virtual DOM (Document Object Model). The Virtual DOM is a lightweight representation of the actual DOM, a tree-like structure that represents the HTML elements of a web page. It acts as an intermediary layer between the application's logic and the browser's rendering engine.

Dive into this code example to understand how the Virtual DOM works in React:

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={() => this.handleClick()}>Increment</button>
      </div>
    );
  }
}

export default Counter;

In the code snippet above, we have a Counter component that displays a count value and a button to increment the count. Whenever the button is clicked, the handleClick function updates the component's state using setState, triggering a re-render of the component.

Behind the scenes, React creates a Virtual DOM representation of the component's UI structure. When a state change occurs, React efficiently calculates the difference between the previous Virtual DOM and the updated Virtual DOM. This process is known as reconciliation.

React then applies the necessary changes to the actual DOM, updating only the specific parts that have changed. This approach helps optimize performance by minimizing DOM manipulations and updates.

By using the Virtual DOM, React provides a more efficient way of updating the user interface. It reduces the number of direct manipulations on the actual DOM, resulting in faster rendering and improved application performance.

The Virtual DOM also enables a declarative programming model, where developers specify how the UI should look based on the application's state, and React takes care of updating the actual DOM accordingly.

JSX Syntax

React introduced JSX, a syntax extension that combines JavaScript and XML-like syntax. It allows developers to write HTML-like code within JavaScript, making component templates more intuitive and readable.

JSX (JavaScript XML) is an important feature of React that allows developers to write HTML-like syntax directly within JavaScript code. It provides a concise and expressive way to define the structure and appearance of React components.

Let's explore a practical code snippet that demonstrates the usage of JSX in React:

import React from 'react';

class Greeting extends React.Component {
  render() {
    const name = 'John Doe';

    return <h1>Hello, {name}!</h1>;
  }
}

export default Greeting;

In the code snippet above, we have a Greeting component that renders a heading element with a dynamic name value. Within the JSX syntax, we can embed JavaScript expressions using curly braces {}. In this case, the name variable is dynamically inserted into the rendered output.

JSX provides several advantages:

  1. Readability: JSX resembles HTML syntax, making it easy to read and understand the structure of the component's UI.

  2. Expressiveness: JSX allows you to express complex UI structures and logic in a concise and declarative manner.

  3. Component composition: JSX enables the composition of multiple components, allowing you to build reusable and modular UI elements.

  4. Full power of JavaScript: Since JSX is essentially JavaScript, you can utilize the full power of the JavaScript language, including variables, functions, and control flow statements, within the JSX code.

Under the hood, React's JSX code is transpiled into regular JavaScript code that creates and manipulates React elements. This transpilation process is typically handled by build tools like Babel.

By leveraging JSX, developers can build dynamic and interactive user interfaces with ease, combining the power of JavaScript with the familiar syntax of HTML. It simplifies the process of creating and maintaining complex UI structures, making React development more efficient and enjoyable.

One-Way Data Flow

React implements a one-way data flow, ensuring that data flows in a single direction. This makes it easier to manage application state and predict how changes will affect the UI. It promotes better control and maintainability of the application's data flow.

Another one of the key features of React is its one-way data flow, which ensures a predictable and efficient approach to managing data within components. In React, data flows in a unidirectional manner, from parent components to child components.

Here's a code snippet that illustrates the one-way data flow in React:

import React from 'react';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello from Parent',
    };
  }

  render() {
    return (
      <div>
        <ChildComponent message={this.state.message} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return <h1>{this.props.message}</h1>;
  }
}

In the code snippet above, we have a ParentComponent that holds a state variable called message. This state is then passed down to the ChildComponent as a prop. The child component simply renders the value of the message prop.

The one-way data flow ensures that changes in the parent component's state propagate down to child components, triggering re-rendering only in the affected components. This approach helps to maintain the integrity and predictability of the application's data.

By enforcing one-way data flow, React promotes better code organization and makes it easier to reason about how data changes affect the UI. It also simplifies debugging and ensures better performance by minimizing unnecessary re-renders.

React's one-way data flow ensures a clear and predictable flow of data from parent to child components. This feature helps in maintaining the application's state consistency, improving code readability, and optimizing rendering performance.

Component Lifecycle Methods

React provides lifecycle methods that allow developers to hook into different stages of a component's lifecycle. These methods enable actions like fetching data, handling events, and updating the UI based on specific triggers.

By leveraging these key features, React empowers developers to build interactive and scalable user interfaces. Its component-based architecture, efficient rendering with the Virtual DOM, JSX syntax, one-way data flow, and lifecycle methods make React a versatile and powerful tool for creating modern web applications.

To fully understand and harness the power of React, it's essential to grasp the concept of component lifecycle methods. These methods provide opportunities to perform specific actions at different stages of a component's life cycle.

Let's take a look at an example code snippet that demonstrates the usage of lifecycle methods in React:

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  componentDidMount() {
    console.log('Component has mounted!');
  }

  componentDidUpdate() {
    console.log('Component has updated!');
  }

  componentWillUnmount() {
    console.log('Component will unmount!');
  }

  handleClick = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

In the code snippet above, we have a MyComponent class-based component that showcases three essential lifecycle methods: componentDidMount, componentDidUpdate, and componentWillUnmount.

componentDidMount is invoked immediately after the component is mounted in the DOM. It is an ideal place to fetch data from an API, set up event listeners, or perform other initialization tasks.

componentDidUpdate is called after the component's state or props have been updated. It enables you to respond to changes and perform additional actions based on the updated data.

componentWillUnmount is invoked just before the component is unmounted and destroyed. It allows you to clean up any resources, event listeners, or subscriptions to prevent memory leaks.

These lifecycle methods provide hooks into the various stages of a component's existence, enabling you to manage side effects, handle state updates, and maintain proper resource management.

By utilizing lifecycle methods effectively, you can enhance the behavior and functionality of your React components, ensuring optimal performance and seamless user experiences.

Virtual DOM and Component-Based Architecture

React's Virtual DOM and component-based architecture are foundational concepts that contribute to its efficiency and flexibility.

Virtual DOM

React introduces the concept of the Virtual DOM, which is a lightweight representation of the actual Document Object Model (DOM). The Virtual DOM serves as a virtual copy of the real DOM, allowing React to efficiently update and render components.

When there are changes in the application's state, React compares the Virtual DOM with the real DOM and applies only the necessary updates, minimizing the number of actual DOM manipulations. This approach significantly improves performance and makes React applications highly responsive.

Imagine you have a toy block tower. Instead of disassembling and reassembling each block to make changes, you take a picture of the tower. Then, you make the necessary modifications and refer to the picture to recreate the tower with the updated changes.

The toy block tower represents the web page or user interface of your application. The original tower is the initial state, and the picture is the Virtual DOM. When you make changes, the framework (like React) creates a new Virtual DOM, a lightweight copy of the actual DOM.

Component-Based Architecture

React follows a component-based architecture, where UI elements are divided into reusable and independent components. Components are the building blocks of a React application, encapsulating their own state and behavior. This modular approach promotes reusability and maintainability.

Components can be composed together to create complex user interfaces. Changes made to one component do not affect other components unless explicitly specified. This separation of concerns simplifies development, testing, and code organization, making it easier to build and maintain large-scale applications.

Imagine you are building a LEGO house. Instead of building the entire house as one big piece, you break it down into smaller LEGO blocks, like walls, windows, and doors. Each block has its own unique features and functions.

Similarly, in component-based architecture, your web application is divided into smaller, self-contained building blocks called components. Each component represents a specific part of the user interface, such as a header, a navigation menu, or a button. These components are like the LEGO blocks that can be assembled and combined together to form the complete web application.

Just like LEGO blocks can be used in different structures, components can be reused across multiple pages or applications. This reusability saves time and effort as you don't need to recreate the same functionality or design from scratch. You can simply use the existing components and customize them as per your needs.

The combination of the Virtual DOM and component-based architecture makes React a powerful tool for building interactive and scalable user interfaces. The Virtual DOM enables efficient updates, while the component-based architecture promotes code reusability and modularity. Together, these concepts lay the foundation for creating robust and performant applications with React.

JSX Syntax and its Advantages

JSX is a syntax extension used in React that allows developers to write HTML-like code within JavaScript. JSX plays a significant role in creating React components and has several advantages.

  1. Readability and Familiarity: JSX combines the power of JavaScript with the familiarity of HTML-like syntax. It allows developers to write component templates in a declarative manner, making the code more readable and understandable. Developers can easily visualize the structure of the UI and the interactions between components, leading to more maintainable code.

  2. Component Composition: JSX facilitates the composition of components. Developers can nest components within each other, similar to how HTML tags are nested. This enables the creation of complex UI structures by assembling smaller, reusable components together. Component composition improves code organization, encourages reusability, and simplifies the management of application state.

  3. Inline JavaScript Expressions: JSX seamlessly integrates JavaScript expressions within curly braces {}. This enables dynamic content rendering and the execution of JavaScript code directly within the component template. Developers can embed variables, perform calculations, and handle conditional rendering, allowing for flexible and dynamic UI creation.

  4. Type Safety and Tooling: JSX enhances the development experience by providing improved tooling and type safety. Editors and IDEs can provide intelligent autocompletion and error checking for JSX syntax, helping to catch mistakes and improve productivity. Additionally, JSX can be statically analyzed for type checking, ensuring that the components receive the correct props and reducing runtime errors.

JSX is a powerful feature that enables developers to build intuitive and dynamic user interfaces with React. By leveraging JSX syntax, React simplifies the creation of component templates, improves code readability, promotes component composition, and provides enhanced tooling support.

What is Angular?

Image

Angular Logo

The Angular framework has revolutionized web development by providing a comprehensive set of tools and features for building robust and scalable applications. Developed and maintained by Google, Angular has its roots in the original framework, AngularJS.

With a focus on modern web development practices, Angular has evolved into a versatile and widely adopted framework. In this section, we will explore Angular, its origins, and the key features that make it a popular choice among developers.

Whether you are new to Angular or seeking to deepen your understanding, this overview will serve as a solid foundation to navigate the world of Angular development.

Angular Framework and its Origins

The Angular framework, often referred to as Angular or Angular 2+, is a powerful front-end development platform created and maintained by Google.

It is the successor of AngularJS, which was the first version of Angular released in 2010. AngularJS introduced the concept of two-way data binding and gained popularity for its ability to build dynamic and interactive web applications.

However, AngularJS had limitations in terms of performance, scalability, and maintainability. This led the Angular team to re-envision the framework. Angular was introduced as a complete rewrite of AngularJS, incorporating modern web development practices and addressing the shortcomings of its predecessor.

Angular was built from the ground up to be more efficient, modular, and developer-friendly. It embraced a component-based architecture, where UI elements are divided into reusable components. This modular approach promotes code reusability, maintainability, and scalability, allowing developers to build complex applications with ease.

The release of Angular introduced significant changes and improvements, resulting in a more streamlined and performant framework. It incorporated features like a more efficient change detection mechanism, a powerful template syntax known as Angular Template Syntax (based on HTML with additional features), enhanced dependency injection, and a revamped command-line interface (CLI) for scaffolding and managing projects.

Over time, Angular has evolved into a comprehensive platform with a wide range of capabilities, including advanced routing, form handling, internationalization, and powerful testing tools. It has gained popularity among developers for its robustness, scalability, and the extensive ecosystem of libraries and tools that support Angular development.

Understanding the origins of Angular helps developers appreciate the design principles, improvements, and rationale behind the framework. It sets the stage for exploring Angular's key features and best practices, and leveraging its full potential to build modern web applications.

Understanding Angular's Modular Structure

One of the core strengths of Angular is its modular structure, which promotes code organization, reusability, and maintainability.

Angular applications are composed of modules, components, services, and other building blocks that work together to create a cohesive application.

Modules

In Angular, modules act as containers that group related components, services, directives, and other features. Each Angular application typically has a root module, known as the AppModule, which serves as the entry point of the application.

Modules help in organizing the application's functionality into manageable units, making it easier to maintain and understand the codebase. They also provide a way to encapsulate dependencies and provide a clean separation of concerns.

Modules in Angular can be likened to different rooms in a house. Imagine you have a big house with multiple rooms, each serving a specific purpose. The living room is for relaxing, the kitchen is for cooking, and the bedroom is for sleeping. Each room has its own unique function and contains the necessary furniture and equipment.

In Angular, modules are used to organize and encapsulate different parts of your application. If we continue with the house analogy, think of each module as a separate room in the house.

For example, you may have a living room module that handles all the components, services, and resources related to displaying and interacting with the living room features. Similarly, you can have a kitchen module that manages all the functionality related to cooking and food preparation.

Now, let's bring in the AppModule, which is the root module of an Angular application. In our house analogy, the AppModule can be compared to the main entrance or foyer of the house. Just as the main entrance connects all the rooms in a house, the AppModule serves as the entry point to your Angular application, connecting all the modules together.

The AppModule plays a crucial role in Angular applications. It imports and aggregates all the other modules, making them accessible to the application. It also bootstraps the application by specifying the root component that will be loaded initially.

Essentially, the AppModule sets the foundation for your Angular application, ensuring that all the necessary modules and components are properly connected and initialized.

By utilizing modules in Angular, including the AppModule, you can achieve better organization, separation of concerns, and maintainability in your application. Each module focuses on a specific area or functionality, making it easier to manage and extend your application as it grows.

Here's a short code snippet in Angular to demonstrate the usage of modules:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

In this example, we have an AppModule class decorated with the NgModule decorator. Inside the decorator, we define the metadata for our module.

The declarations array lists all the components, directives, and pipes that belong to this module. Here, we have a single component AppComponent declared.

The imports array specifies other modules that this module depends on. In this case, we're importing the BrowserModule, which provides essential features for running Angular applications in a web browser.

The providers array is used to provide any services or dependencies required by the components in this module.

The bootstrap array indicates the root component of the application, which will be instantiated when the application starts. Here, we have AppComponent specified as the bootstrap component.

Components

Components are the building blocks of Angular applications. They represent specific sections of the user interface and encapsulate their own styles, templates, and logic.

Components can be composed together to create complex UI structures. By breaking the UI into smaller, reusable components, the application becomes more modular and easier to develop and maintain.

Components in Angular are like building blocks that make up the different parts of a house, just like the React components I talked about earlier.

Imagine you are building a house using Lego bricks. Each Lego brick represents a component, and when you put them together, they form different parts of the house, such as walls, doors, and windows.

Similarly, in Angular, components are the basic building blocks of an application's user interface. They encapsulate a specific functionality or part of the user interface, just like the Lego bricks forming specific parts of a house.

For example, you can have a component for displaying a navigation menu, another component for showing a list of products, and yet another component for handling user registration.

Components consist of three main parts: the template, the class, and the styles. The template defines the structure and layout of the component, similar to how the Lego bricks come together to form a specific shape. The class contains the logic and data that the component needs to function, like the instructions that guide you on how to assemble the Lego bricks. The styles define the appearance and design of the component, just like the colors and patterns you choose for your Lego house.

When you put all the components together, just like assembling Lego bricks, you create a complete and interactive user interface for your Angular application. Each component works independently, but they can also communicate and interact with each other, allowing you to build complex and dynamic applications.

Components in Angular are the basic building blocks of an application's user interface, encapsulating specific functionalities. By combining and arranging components, you can create a complete and interactive user interface for your Angular application, just like assembling Lego bricks to build a house.

A short code snippet in Angular to demonstrate the usage of components:

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <h1>Welcome to the Example Component!</h1>
    <p>This is the content of the component.</p>
  `
})
export class ExampleComponent {
  // Component logic goes here
}

In this example, we have an ExampleComponent class decorated with the @Component decorator. Inside the decorator, we define the metadata for our component.

The selector property specifies the HTML selector used to render the component. In this case, the selector is app-example, which means the component will be rendered as <app-example></app-example> in the HTML.

The template property defines the component's view or template. It contains the HTML markup that will be rendered when the component is used. In this example, we have a simple heading and paragraph.

The ExampleComponent class represents the logic and behavior of the component. Here, you can define properties and methods, and handle events related to the component.

Components are the building blocks of Angular applications. They encapsulate HTML, CSS, and JavaScript functionality into reusable and self-contained units. This makes it easier to develop and maintain complex user interfaces.

Services

Services are used for sharing data, logic, and functionality across multiple components. They encapsulate reusable business logic, data access, and communication with external APIs. Services can be injected into components or other services, enabling a clear separation of concerns and promoting code reusability.

Services in Angular can be likened to the helpers or assistants that make a house function smoothly. Imagine you are living in a house and you have different people helping you with specific tasks. For example, you might have a cleaning service to keep your house tidy, a plumber to fix any water-related issues, and an electrician to take care of electrical matters.

Same thing in Angular – services are like professionals that handle specific tasks and provide the functionality to different parts of your application. They are designed to perform common tasks or provide shared functionality that multiple components may need. Just like the helpers in a house, services can be called upon when needed and provide specialized assistance.

For example, you can have a data service that retrieves and stores data from an external source, such as a server or a database. This data service can be used by multiple components to fetch and update data, ensuring consistency across your application.

Another example is an authentication service that manages user authentication and authorization. This allows different components to verify user credentials and control access to certain features.

Services act as a central hub of functionality that can be shared and reused throughout your application. They help to organize your code and promote a modular structure, making it easier to maintain and update your application over time.

They act as centralized helpers, allowing different parts of your application to access and utilize their specialized capabilities. By using services, you can create a modular and efficient application structure, just like having dedicated helpers in a house to ensure everything runs smoothly.

Here's a short code snippet in Angular to demonstrate the usage of services:

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
  getData(): string {
    return 'This is data retrieved from the DataService!';
  }
}

In this example, we have a DataService class decorated with the @Injectable decorator. This decorator marks the class as an injectable service, allowing it to be injected into other components or services.

Inside the DataService class, we define a getData method that returns a string. This method can be used to fetch data from an API, perform calculations, or any other logic related to data retrieval.

Services in Angular are responsible for handling data, business logic, and other shared functionality across components. They promote code reusability, separation of concerns, and provide a way to centralize common operations and data access within your application.

Directives

Directives are used to extend the behavior of HTML elements or create reusable custom elements. They allow developers to manipulate the DOM, add event listeners, apply dynamic styling, and perform other tasks to enhance the functionality and appearance of the application.

They can be compared to instructions or rules that you give to objects in your house. Imagine you have a set of toys or objects, and you want to assign certain behaviors or actions to them. You might use stickers or labels to indicate what each object should do.

Likewise, in Angular, directives are used to give instructions or behaviors to elements in your application's user interface. They are like special stickers that you can attach to HTML elements to define how they should behave or appear. Directives can control the visibility, style, and behavior of elements, allowing you to customize their functionality.

For example, you can have a highlight directive that adds a special effect to a specific HTML element, making it stand out with a different color or animation. This directive can be used to highlight important information or interactive elements on a web page.

Another example is the if directive, which conditionally shows or hides an element based on certain conditions. This can be used to dynamically display content based on user input or application state.

Directives help you create interactive and dynamic user interfaces by providing instructions to HTML elements. They are like labels that tell the elements how to behave and what to look like. By using directives, you can customize and control the behavior of elements in your application, making it more engaging and user-friendly.

In simple terms, directives in Angular are like special stickers that you can attach to objects in your house (HTML elements) to tell them how to behave or look. They allow you to add interactive features and customize the appearance of elements, making your application more engaging and enjoyable for users.

Here's a short code snippet in Angular to demonstrate the usage of a custom directive:

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private elementRef: ElementRef) {}

  @HostListener('mouseenter')
  onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string | null) {
    this.elementRef.nativeElement.style.backgroundColor = color;
  }
}

In this example, we're creating a custom directive called appHighlight. This directive is applied to an HTML element using the selector [appHighlight].

When the user hovers over the element, the onMouseEnter event listener is triggered, and it calls the highlight method to set the background color of the element to yellow.

Similarly, when the user moves the mouse away from the element, the onMouseLeave event listener is triggered, and it removes the highlight effect by setting the background color back to the default.

By attaching the appHighlight directive to an HTML element, we can dynamically control its appearance and behavior. This demonstrates the concept of directives in Angular, where you can define custom behaviors or instructions that can be applied to HTML elements to enhance their functionality and visual representation.

Here's an example of how you can apply the appHighlight directive to an HTML element in your template:

<div appHighlight>
  This is a highlighted element. Move your mouse over it to see the effect!
</div>

In this case, we have a <div> element to which we apply the appHighlight directive using the directive selector [appHighlight]. When the user hovers over this <div> element, the directive's behavior is triggered, and the background color of the element will be set to yellow, as defined in the directive's code.

Understanding Angular's modular structure is crucial for building scalable and maintainable applications. By organizing functionality into modules, and leveraging reusable components, services, and directives, developers can create applications that are easier to develop, test, and extend.

This modular approach also facilitates collaboration among team members and enables better code organization. This leads to more efficient development workflows and better overall application architecture.

Angular CLI and TypeScript Integration

Angular CLI (Command Line Interface) is a powerful tool that simplifies the development process of Angular applications. It provides a command-line interface for creating, building, testing, and deploying Angular projects.

Additionally, Angular CLI seamlessly integrates with TypeScript, a statically typed superset of JavaScript, to enhance the development experience and enable advanced features.

Creating Projects

With Angular CLI, creating a new Angular project is as simple as running a single command. The CLI generates a basic project structure, including configuration files, boilerplate code, and a development server. This saves time and eliminates the need for manual project setup, ensuring that developers can start coding right away.

To create a new project in Angular, you can use the Angular CLI (Command Line Interface). Follow these steps:

  • Open your terminal or command prompt.

  • Navigate to the directory where you want to create your Angular project.

  • Run the following command:

ng new project-name

Replace project-name with the desired name for your project (I choose frontend-frameworks). Make sure to avoid spaces or special characters.

Image

Selecting options for Angular project

Image

Creating Project

The Angular CLI will prompt you to choose additional options for your project, such as the stylesheet format (CSS, SCSS, Sass etc.) and whether you want to enable routing. Make your selections and press Enter.

Wait for the CLI to create the project. It will install the necessary dependencies and set up the basic structure.

Once the process is complete, navigate into the project directory:

cd project-name

You can now start working on your Angular project. Use the ng serve command to run the development server and view your application in the browser:

Image

ng serve

ng serve

Your Angular project will be accessible at http://localhost:4200.

The ng new command is used to generate a new Angular project with the specified name. It sets up the initial project structure, installs the necessary dependencies, and configures the project files.

Using the Angular CLI simplifies the process of creating and managing Angular projects, allowing you to focus on development rather than boilerplate setup.

Code Generation

Angular CLI offers a variety of powerful code generation commands that help streamline the development process.

Developers can easily generate components, services, modules, and other Angular elements using the CLI, reducing the amount of manual coding required. This accelerates development speed and ensures consistent code patterns throughout the project.

Here are the commands for generating different Angular elements using the Angular CLI:

Image

Generating a component

  • Generating a Component:
ng generate component component-name

This command creates a new component with the specified name. It generates the component files, including the HTML template, CSS styles, TypeScript code, and the necessary component tests.

Image

Generating a service

  • Generating a Service:
ng generate service service-name

This command generates a new service with the specified name. Services are used for handling data, implementing business logic, and sharing functionality across components.

Image

Generating a module

  • Generating a Module:
ng generate module module-name

Use this command to create a new module with the specified name. Modules help organize and structure your Angular application by grouping related components, services, and other Angular elements.

Image

Generating a directive

  • Generating a Directive:
ng generate directive directive-name

This command generates a new directive with the specified name. Directives allow you to modify the behavior or appearance of HTML elements in your Angular application.

Image

Generating a pipe

  • Generating a Pipe:
ng generate pipe pipe-name

Use this command to create a new pipe with the specified name. Pipes are used for transforming data in your Angular templates, such as formatting dates, applying custom filters, or truncating or shortening an input text to a specified length.

These commands are executed in the terminal or command prompt, and Angular CLI will automatically generate the corresponding files and folder structure based on the specified name. Make sure to replace component-name, service-name, module-name, directive-name, or pipe-name with your desired names when using these commands.

Development Server

Angular CLI includes a built-in development server that allows developers to run and test their applications locally.

The server automatically reloads the application whenever changes are made, providing a smooth development experience. It also offers features like hot module replacement, allowing developers to see the immediate effect of their code changes without the need for a full application reload.

TypeScript Integration

Angular is built using TypeScript, a statically typed superset of JavaScript. TypeScript brings powerful features like static type checking, enhanced IDE support, better code navigation, and advanced refactoring tools.

Angular CLI seamlessly integrates with TypeScript, providing out-of-the-box support for compiling TypeScript code into JavaScript and handling TypeScript-specific configuration options.

By leveraging Angular CLI and TypeScript integration, developers can streamline their development workflow, enhance productivity, and benefit from the robustness and scalability of the Angular framework.

Angular CLI simplifies common tasks, automates repetitive processes, and provides a seamless TypeScript development experience, allowing developers to focus on building high-quality applications.

What is Vue.js?

Image

Vue.js logo

Vue.js is a progressive JavaScript framework for building user interfaces. It is designed to be approachable, versatile, and easy to integrate into existing projects. Whether you're a beginner or an experienced developer, Vue.js offers a smooth learning curve and a flexible architecture that makes it a popular choice for web application development.

In this section, I'll teach you the fundamentals of Vue.js and help you get started with building your own Vue.js applications. We'll explore the core concepts, syntax, and key features that make Vue.js a powerful and intuitive framework.

If you're new to Vue.js, don't worry! I'll guide you step by step, starting from the basics and gradually diving into more advanced topics. By the end of this guide, you'll have a solid understanding of Vue.js and be well-equipped to start building your own dynamic and interactive web applications.

So, let's embark on this Vue.js journey together and unlock the full potential of this powerful JavaScript framework. Whether you're building a small personal project or a large-scale application, Vue.js has the tools and capabilities to bring your ideas to life.

Vue.js and its Philosophy

Vue.js is built upon a set of guiding principles that shape its design and philosophy. Understanding these principles is crucial for effectively utilizing the framework and developing high-quality Vue.js applications.

  1. Approachability: Vue.js prides itself on being an approachable framework, making it easy for beginners to get started. Its syntax is simple and intuitive, resembling plain HTML templates, which lowers the learning curve. Vue.js allows developers to gradually adopt its features, enabling them to integrate it into existing projects or start small and scale as needed.

  2. Versatility: Vue.js is a versatile framework that you can use for a wide range of applications. It offers a flexible architecture, allowing developers to choose the tools and libraries they prefer. Whether you want to build a single-page application (SPA), a progressive web app (PWA), or integrate Vue.js into a larger project, the framework provides the necessary flexibility to meet your specific needs.

  3. Component-Based Development: Vue.js promotes a component-based approach to development. Components are self-contained and reusable building blocks that encapsulate their own logic, styles, and templates. This modular structure facilitates code reuse, simplifies maintenance, and enables better collaboration among team members. Vue.js provides a clear and intuitive syntax for defining and using components, making it straightforward to create complex user interfaces.

  4. Reactivity: Vue.js leverages a reactive data model, which means that changes to the underlying data automatically update the corresponding views. This reactivity makes it easier to build interactive and responsive applications without the need for manual DOM manipulation. Vue.js tracks dependencies between data and views, ensuring efficient updates and optimized rendering performance.

By embracing these principles, Vue.js empowers developers to build elegant, maintainable, and scalable applications. The philosophy of approachability, versatility, component-based development, and reactivity sets the foundation for creating exceptional user interfaces with Vue.js.

Vue's Reactivity System and Component Composition

Vue.js employs a powerful reactivity system that enables efficient and automatic updates to the user interface based on changes in the underlying data. This reactivity is achieved through Vue's reactive data model and makes it easy to create dynamic and responsive applications.

Reactive Data Model

Vue.js uses a reactive data model, where data properties are automatically tracked for changes. When the data changes, Vue.js automatically updates the associated views, ensuring a synchronized and reactive user interface. This reactivity simplifies the development process as developers do not need to manually manipulate the DOM to reflect data changes.

In Vue.js, the reactive data model is like a magical connection between your data and the user interface. Imagine you have a magic box where you can put your data. Whenever the data inside the box changes, the UI automatically updates to reflect those changes. It's like having a real-time mirror of your data!

In this magical world of Vue.js, you define your data properties inside a Vue component, and Vue takes care of tracking those properties for you. Whenever a property changes, Vue automatically detects it and updates the corresponding parts of the UI. This means you don't have to manually update the UI elements every time the data changes. Vue does all the heavy lifting for you.

So, let's say you have a counter in your app. When you click a button to increase the counter value, Vue will instantly update the value in the UI without you having to write any extra code. It's as simple as that! The reactive data model in Vue.js makes it easy to keep your UI in sync with your data, saving you time and effort.

By embracing the reactive data model in Vue.js, you can build dynamic and interactive user interfaces with ease. It allows you to focus on manipulating the data, and Vue takes care of updating the UI accordingly. It's like having a superpower that simplifies your development process and brings your app to life.

So, remember, with Vue.js, you can harness the power of the reactive data model to create engaging and responsive user interfaces effortlessly.

Computed Properties and Watchers

Vue.js provides computed properties and watchers to handle more complex logic and reactivity requirements.

Computed properties allow developers to define properties that are computed based on other reactive data properties. These computed properties are cached and updated only when their dependencies change, optimizing performance.

Watchers, on the other hand, allow developers to react to specific data changes and perform custom logic when those changes occur.

Computed properties and watchers are like special helpers that assist you in handling data transformations and reacting to changes. Imagine you have a friend who always keeps an eye on things for you and gives you updates whenever something changes. That's exactly what computed properties and watchers do in Vue.

Computed properties are like smart calculators that automatically compute and update values based on other data properties. It's like having a helper who can perform complex calculations for you.

For example, let's say you have the length and width of a rectangle, and you want to calculate its area. With computed properties, you can define a property called area that dynamically computes the area value whenever the length or width changes. This way, you always have the correct area value without manually recalculating it.

On the other hand, watchers are like attentive observers who keep an eye on specific data properties and perform actions when they change. It's like having a friend who notifies you whenever something important happens.

For example, let's say you have a form input field, and you want to perform some validation or execute a function whenever the input value changes. With watchers, you can define a watcher that watches the input value and triggers a function whenever it changes. This allows you to take immediate action and respond to user inputs or data changes.

By using computed properties and watchers in Vue.js, you can simplify complex data manipulations and react to changes effectively. They provide you with powerful tools to automate calculations, perform validations, and execute custom logic whenever necessary. It's like having reliable assistants who handle the heavy lifting for you, making your coding experience more efficient and enjoyable.

With computed properties and watchers in Vue.js, you have the power to automatically compute values and respond to changes effortlessly. They are your trusted companions in managing data transformations and handling dynamic behaviors in your Vue components.

Component Composition

Vue.js promotes component-based development and encourages the composition of smaller, reusable components to build larger and more complex user interfaces.

Components can be easily created, registered, and used throughout the application. Vue's reactivity system allows data to flow seamlessly between parent and child components, enabling a hierarchical and reactive structure.

Component composition, in Vue.js, is like playing with building blocks to create something amazing. Let's say you have different LEGO bricks, and each brick represents a specific part of your website or web app. With component composition in Vue, you can easily combine these bricks to build something much bigger and more powerful.

Think of each Vue component as a LEGO brick that has its own unique functionality and appearance. You can create components for a navigation bar, a button, an image gallery, or any other part of your web page. Now, when you want to build a complete web page, you can assemble these components together, just like stacking LEGO bricks on top of each other.

Component composition allows you to reuse components and nest them within each other to create complex and interactive web pages. It's like building a LEGO spaceship by combining different bricks, adding wings, a cockpit, and other parts.

Similarly, in Vue, you can nest components inside one another, passing data and interacting with each other to create dynamic and interactive user interfaces.

By using component composition in Vue.js, you can easily break down your web page into smaller, manageable parts, and then assemble them together to create a cohesive and functional whole. It's like having a box of LEGO bricks that you can use to build anything you imagine.

Component composition lets you create individual components for different parts of your web page and then combine them together to create a complete and interactive experience. It's a fun and creative way to build awesome websites and web apps.

Props and Events

Vue.js facilitates communication between components through the use of props and events. Props allow data to be passed from parent components to child components, enabling a unidirectional flow of data. Events, on the other hand, allow child components to emit events and notify parent components about specific actions or changes.

In Vue.js, props and events are like passing messages between components, just like friends talking to each other. Think of it as you having two friends who want to share information with each other. One friend can send a message (prop) to the other friend, and the other friend can respond with a message (event) back.

In Vue, components can communicate with each other using props and events. Think of a prop as a message that a parent component sends to its child component. It's like a note passed from one friend to another, containing important information. The child component can receive the prop and use that information to display or modify its behavior. It's a way for components to share data with each other.

Now, events are like the response from the child component back to the parent component. It's the other friend replying to the message they received. The child component can emit an event to let the parent component know that something happened or that it needs to take action. It's like raising your hand and saying, "Hey, something important just happened!"

With props and events in Vue.js, components can talk to each other, share information, and work together as a team. This communication between components allows you to build dynamic and interactive web pages where different parts can exchange data and work together seamlessly.

So, just like friends passing notes and responding with actions, props and events in Vue.js help components share information and work together as a team. It's a fun way to create interactive and collaborative web applications.

Vue's reactivity system and component composition provide a solid foundation for building flexible and modular applications. By leveraging the reactivity system, developers can create dynamic and responsive user interfaces, while component composition promotes code reuse, maintainability, and scalability.

With Vue.js, developers can easily manage complex application states and achieve a seamless and interactive user experience.

Single-File Components and Vue CLI

Vue.js offers a convenient way to structure and organize components using Single-File Components (SFCs). SFCs encapsulate the template, script, and styles of a component into a single file, promoting better separation of concerns and improving code readability.

Structure and Organization

With Single-File Components, each component is contained within a single file, which makes it easier to understand and manage.

The template section holds the HTML markup, the script section contains the component's logic written in JavaScript, and the style section holds the component's styles using CSS or pre-processors like SASS or LESS. This modular structure allows developers to work on different aspects of a component without navigating through multiple files.

Here's a short code snippet that demonstrates the structure and organization of a Vue single-file component:

<template>
  <div class="my-component">
    <!-- Component HTML template -->
    <h1>{{ message }}</h1>
    <button @click="increment">Click Me!</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, Vue!',
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

<style scoped>
.my-component {
  /* Component-specific styles */
}
</style>

In this code snippet, you can see the structure of a Vue single-file component. It consists of three main sections: <template>, <script>, and <style>.

The <template> section contains the HTML template of the component. It defines the structure and layout of the component's content.

The <script> section contains the JavaScript code for the component. It includes the component's definition, which includes the component's name, data, and methods.

In this example, we have a data object that holds the component's state, including a message property and a count property. We also have a methods object that defines the increment method, which increments the count property when the button is clicked.

The <style> section contains the component-specific styles. By using the scoped attribute, the styles are only applied to the component's elements, ensuring encapsulation and preventing conflicts with styles from other components.

This structure helps in organizing and managing the code for your Vue components. It keeps the HTML, JavaScript, and styles related to a component in a single file, making it easier to understand and maintain your codebase.

Scoped Styles

Single-File Components provide built-in support for scoped styles. By default, styles defined within a component only apply to that component's template, preventing style conflicts with other components. This encapsulation makes it easier to style components without worrying about global style pollution.

Take a look at this code snippet that demonstrates the use of scoped styles in a Vue single-file component:

<template>
  <div class="my-component">
    <!-- Component content -->
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>

<style scoped>
.my-component {
  background-color: #f1f1f1;
  padding: 20px;
  border-radius: 5px;
}
</style>

In this code snippet, you can see the use of scoped styles in Vue single-file components. The <style> section includes the component-specific styles, and the scoped attribute is added to the <style> tag.

Scoped styles mean that the styles defined within the component's <style> section only apply to the elements within that component.

In the example, the .my-component class is used to style the component's <div> element. The background color is set to #f1f1f1, there's padding around the component, and the border radius is set to 5px.

The scoped styles ensure that these styles only affect the specific component they are defined in. This helps prevent style conflicts and allows for better encapsulation of styles within the component. It allows you to write component-specific styles without worrying about affecting other components or elements on the page.

Using scoped styles in Vue single-file components promotes code organization and separation of concerns, making it easier to manage and maintain your styles within your Vue project.

Vue CLI

Vue CLI (Command Line Interface) is a powerful tool that simplifies the development of Vue.js applications. It provides a command-line interface for creating, configuring, and managing Vue projects.

Vue CLI includes features like project scaffolding, code generation, and an integrated development server, making it easy to set up and start building Vue applications.

Image

Installing Vue CLI

# Install Vue CLI globally (if not already installed)
npm install -g @vue/cli

# Create a new Vue project
vue create my-project

Image

Create Vue Project

As you can see in code snippet above, we first install Vue CLI globally using the npm install command. This step is required only if you haven't installed Vue CLI before.

Once Vue CLI is installed, you can create a new Vue project using the vue create command. In the example, we're creating a project named "my-project". Vue CLI will prompt you to select a preset configuration for your project. You can choose from various options like default, manually select features, or use a saved preset.

After selecting the preset, Vue CLI will set up the project structure, install the necessary dependencies, and generate the initial files for your Vue project.

Using Vue CLI simplifies the process of setting up a new Vue project by providing a command-line interface and project scaffolding. It automates many common tasks, such as project configuration, dependency installation, and build setup.

Vue CLI also provides additional features like hot-reloading during development, ready-to-use templates, and easy project customization.

With Vue CLI, you can quickly start working on your Vue projects without worrying about the initial setup, allowing you to focus on writing code and building your application.

Image

npm run build

Build and Deployment

Vue CLI offers a streamlined build process that optimizes the application for production. It generates optimized bundles, minifies the code, and applies various optimizations to improve performance.

Additionally, Vue CLI supports easy deployment of Vue applications to various hosting platforms or content delivery networks (CDNs), simplifying the deployment process.

When it comes to building and deploying your Vue.js application, Vue CLI provides a simple and efficient way to handle this process. After you've developed your application locally, you'll need to generate a production-ready build that can be deployed to a web server.

Vue CLI offers a command called npm run build that compiles your Vue components, bundles your assets, and optimizes your code for production. It generates a dist directory containing all the necessary files for deployment. This process ensures that your application is optimized for performance and ready to be served to users.

Once you have your production build, you can deploy it to a web server or a hosting platform of your choice. You can simply upload the contents of the dist directory to your server, and your Vue.js application will be accessible to users over the internet.

Deploying your Vue.js application typically involves configuring your server to serve the static files correctly, setting up any necessary server-side routing or configurations, and ensuring that your server has the required dependencies installed.

It's important to choose a reliable and secure hosting solution that fits your application's requirements. Popular hosting options for Vue.js applications include platforms like Netlify, Vercel, and GitHub Pages, which offer seamless deployment workflows and robust infrastructure.

By leveraging the build and deployment features provided by Vue CLI, you can easily package and deploy your Vue.js application, making it accessible to users worldwide.

By utilizing Single-File Components (SFCs) and Vue CLI, developers can efficiently structure their Vue.js projects, enhance code organization, and leverage powerful development tools. This approach not only improves code maintainability but also allows for better collaboration among team members.

Vue's ecosystem provides a seamless development experience that empowers developers to build robust and scalable applications with ease.

Comparing JavaScript Frameworks

When it comes to choosing a frontend framework for web development, you'll need to consider your use case, the features you need, and your skillset, among other things.

React, Angular, and Vue are all widely adopted frameworks that offer different approaches and features. They call them "The Big Three". Understanding the similarities and differences between these frameworks can help you make an informed decision based on your project requirements and personal preferences.

In this section, we will compare React, Angular, and Vue across various aspects such as learning curve, performance, community support, ecosystem, and more. We will explore their strengths and weaknesses, highlighting the unique features and benefits they bring to the table.

By examining these frameworks side by side, you can gain a better understanding of their key characteristics and determine which one aligns best with your needs. Remember, there is no one-size-fits-all solution, and the right choice ultimately depends on the specific demands of your project.

So, let's dive into the comparison and discover the similarities and differences among the big three. This knowledge will equip you with the necessary insights to choose the frontend framework that will enhance your development workflow and enable you to create exceptional web applications.

Similarities and Differences between React, Angular, and Vue

React, Angular, and Vue are all powerful frontend frameworks, but they differ in their approach, syntax, and ecosystem. Let's explore the key similarities and differences between these frameworks:

  1. Component-Based Architecture: React, Angular, and Vue all follow a component-based architecture, where applications are built by composing reusable components. This promotes code reusability, modularity, and scalability.

  2. Virtual DOM: React and Vue utilize a Virtual DOM, a lightweight representation of the actual DOM. This allows for efficient updates and ensures optimal rendering performance. Angular, on the other hand, uses a different change detection mechanism based on zones.

  3. Learning Curve: React and Vue are known for their gentle learning curves, making them more beginner-friendly. Angular, on the other hand, has a steeper learning curve due to its extensive feature set and complex concepts.

  4. Language and Syntax: React uses JavaScript, while Angular employs TypeScript, a superset of JavaScript. Vue supports both JavaScript and TypeScript, offering flexibility in language choice. The syntax and coding styles also differ across the frameworks, with React using JSX, Angular using a template-driven approach, and Vue utilizing a combination of template syntax and JavaScript.

  5. Ecosystem and Community Support: React, Angular, and Vue have vibrant ecosystems with active communities. React has a large and mature ecosystem with numerous libraries and tools available. Angular has strong corporate backing from Google, which ensures robust development and support. Vue has gained popularity in recent years, and although its ecosystem is smaller, it continues to grow rapidly.

  6. Popularity and Adoption: React has gained significant popularity and is widely adopted by large tech companies. Angular, being a full-fledged framework, is commonly used for enterprise-level applications. Vue has experienced rapid growth and has gained a strong following in the developer community.

While these frameworks share some similarities, their differences in syntax, learning curve, and ecosystem can influence your choice. It's essential to evaluate your project requirements, team expertise, and personal preferences to determine which framework suits your needs best.

Performance Considerations and Scalability

Performance is a crucial aspect to consider when choosing a frontend framework for your web application. Let's explore the performance considerations and scalability of React, Angular, and Vue:

  1. Rendering Performance: React, Angular, and Vue all employ different rendering approaches. React utilizes a Virtual DOM, which efficiently updates and renders only the necessary components. Angular uses its own change detection mechanism, while Vue leverages a combination of Virtual DOM and a reactive data model. These approaches aim to minimize unnecessary re-renders and enhance performance.

  2. Bundle Size: The size of the framework's bundle can impact the initial load time of your application. React and Vue have smaller footprints, allowing for faster initial loading. Angular, being a full-fledged framework, has a larger bundle size, which may require additional optimization techniques to improve load times.

  3. Optimization Techniques: All three frameworks offer various optimization techniques to improve performance. These include code splitting, lazy loading, tree shaking (also known as dead code elimination, it's a process used by modern JavaScript bundlers to remove unused code from a project), and caching strategies. By implementing these techniques correctly, you can minimize the overall bundle size, reduce network requests, and optimize the runtime performance of your application.

  4. Scalability: When it comes to scalability, all three frameworks can handle large-scale applications. However, Angular, with its opinionated structure and extensive features, is particularly suited for enterprise-level applications that require complex architecture and scalability. React and Vue, being more lightweight and flexible, can also scale well, but they may require additional setup and architectural decisions as the application grows.

It's important to note that performance considerations and scalability depend on various factors, including the size and complexity of your application, the specific optimization techniques implemented, and the efficiency of your code.

Conducting performance testing, utilizing best practices, and staying updated with the latest optimizations can help ensure optimal performance and scalability regardless of the chosen framework.

Keep in mind that while performance is important, it should be balanced with other considerations such as developer productivity, community support, and project requirements. Evaluating these factors holistically will enable you to make an informed decision regarding the performance and scalability needs of your web application.

Learning Curve and Community Support

The learning curve and community support are essential considerations when choosing a frontend framework like React, Angular, or Vue. Let's explore these aspects in more detail:

  1. Learning Curve: The learning curve refers to the time and effort required to become proficient in a particular framework. React, Angular, and Vue have different learning curves based on their concepts, syntax, and ecosystem.

  • React: React has a relatively gentle learning curve, especially for developers familiar with JavaScript. Its core concepts like components, state management, and JSX syntax are easy to grasp. But mastering advanced topics like React Hooks and state management libraries may require additional effort.

  • Angular: Angular has a steeper learning curve (especially a difficult initial learning process) compared to React and Vue. It is a full-fledged framework with a comprehensive set of features and a specific way of doing things. Angular's learning curve stems from its powerful dependency injection system, TypeScript integration, and the extensive use of decorators.

  • Vue: Vue strikes a balance between React and Angular in terms of learning curve. Its straightforward API, clear documentation, and gradual adoption approach make it beginner-friendly. Vue's simplicity and intuitive syntax make it relatively easy to get started with, even for developers new to frontend frameworks.

  1. Community Support: The strength of the community around a framework can greatly impact your learning experience and development journey. React, Angular, and Vue all have vibrant communities with active support channels, forums, and online resources.

  • React: React has a large and robust community, with countless tutorials, documentation, and third-party libraries available. The React community is known for its responsiveness and continuous innovation, making it easier to find solutions to common problems.

  • Angular: Angular has solid community support, backed by Google. It has extensive documentation, official guides, and a dedicated team maintaining the framework. The Angular community is known for its focus on best practices, architectural patterns, and enterprise-level support.

  • Vue: Although Vue's community is relatively smaller compared to React and Angular, it is rapidly growing and gaining momentum. Vue has a friendly and supportive community that actively contributes to its development. The Vue community is known for its inclusivity, helpfulness, and emphasis on simplicity.

Considering the learning curve and community support is crucial, especially for beginners. It's important to choose a framework with a learning curve that aligns with your current skill level and project requirements. Plus, a strong and active community can provide valuable resources, guidance, and collaboration opportunities, helping you overcome challenges and stay up-to-date with the latest trends and best practices.

How to Choose the Right Framework for Your Project

Selecting the most suitable frontend framework for your project requires careful consideration of several factors. Here are some key points to keep in mind when making your decision:

Project Requirements

Start by evaluating your project's specific requirements. Consider factors such as the complexity of the application, the size of the development team, scalability needs, and performance requirements. You should also think about any existing technical constraints such as the technology stack being used, integration with existing systems or libraries, and compatibility with specific platforms or frameworks.

Understanding these requirements will help you determine which framework aligns best with your project goals.

Learning Curve

Assess your team's skillset and experience level. If you have a team of developers who are already proficient in a particular framework, it may be more efficient to leverage their existing expertise.

On the other hand, if you have a team of beginners or developers with a broad range of skills, opting for a framework with a gentler learning curve can facilitate a smoother onboarding process.

Community and Ecosystem

Consider the size and vibrancy of the framework's community and ecosystem. A robust community provides access to a wealth of resources, tutorials, libraries, and support channels.

A thriving ecosystem ensures that you have a wide range of tools, plugins, and extensions to enhance your development process. It also indicates the long-term viability and sustainability of the framework.

Compatibility and Integration

Evaluate how well the framework integrates with your existing technology stack. Consider factors such as compatibility with backend frameworks, support for APIs, and the availability of plugins or packages that can facilitate integration with other tools and services you may be using.

Flexibility and Customization

Each framework has its own conventions and patterns. Assess whether the framework's structure and design principles align with your development preferences and project requirements.

Consider the flexibility and extensibility of the framework, as well as the ease with which you can customize and adapt it to suit your specific needs.

By carefully evaluating these factors, you can make an informed decision and select the right frontend framework that will empower you to build scalable, performant, and maintainable web applications that meet your project requirements and developer team's expertise.

Resources for Learning and Getting Started

When embarking on your journey to learn and master frontend frameworks like React, Angular, or Vue, it's important to have access to high-quality learning resources.

Here are some recommended resources to help you get started:

Official Documentation

The official documentation of each framework is an invaluable resource. It provides comprehensive guides, tutorials, and examples that cover the core concepts, features, and best practices.

Start by exploring the official documentation of React (react.dev), Angular (angular.io), and Vue (vuejs.org) to gain a solid foundation.

Online Courses and Tutorials

Online courses and tutorials offer structured learning paths and hands-on exercises that can accelerate your understanding of frontend frameworks.

Platforms like Udemy, Coursera, Udacity, and Pluralsight offer a wide range of courses taught by industry experts. Look for courses that cater to beginners and offer practical projects to apply your knowledge.

YouTube Channels and Video Series

YouTube is a treasure trove of tutorial videos and in-depth explanations of frontend frameworks. Channels like Traversy Media, The Net Ninja, freeCodeCamp, and Academind provide comprehensive video series that cover various aspects of React, Angular, and Vue, from basics to advanced topics. These videos offer a visual and interactive learning experience.

Online Communities and Forums

Joining online communities and forums dedicated to frontend development can greatly enhance your learning experience.

Platforms like Stack Overflow, Reddit, freeCodeCamp, Hashnode, Hackernoon, and Dev.to have active communities where you can ask questions, seek guidance, and engage in discussions with fellow developers. The supportive nature of these communities can help you overcome challenges and expand your knowledge.

Books and eBooks

Books are another valuable resource for in-depth learning. Look for recommended books on React, Angular, and Vue that cater to beginners and cover the fundamental concepts.

Some popular titles include React Up and Running by Stoyan Stefanov, Angular: Up and Running by Shyam Seshadri and Brad Green, and Vue.js 2 Cookbook by Andrea Passaglia.

By utilizing these resources, you can access a variety of learning materials that cater to different learning styles and preferences.

Remember to combine theory with hands-on practice to reinforce your understanding of the frameworks. As you progress, keep exploring additional resources, attending workshops, and contributing to the community to further enhance your skills and stay up-to-date with the latest developments in frontend development.

Conclusion

Frontend frameworks such as React, Angular, and Vue play a crucial role in modern web development. They provide powerful tools and abstractions that simplify the creation of interactive and dynamic user interfaces. Throughout this guide, we've explored the key features and benefits of these frameworks, as well as their similarities and differences.

Understanding the core concepts of each framework, such as React's component-based architecture, Angular's modular structure, and Vue's reactivity system will allow to make informed decisions on which framework suits your project requirements and personal preferences.

It's important to consider factors like performance, scalability, learning curve, and community support when choosing the right framework for your development endeavors.

Remember, learning a frontend framework is an ongoing process. It's essential to continuously expand your knowledge, stay updated with the latest trends and best practices, and keep honing your skills.

Explore the abundance of resources available, such as official documentation, online courses, tutorials, and community forums, to deepen your understanding and proficiency in using these frameworks.

As you delve deeper into the world of frontend development, don't limit yourself to just one framework. Familiarize yourself with multiple frameworks to broaden your skill set and adapt to different project requirements. Embrace the opportunities for collaboration and learning from other developers within the vibrant communities surrounding these frameworks.

Frontend frameworks have revolutionized web development, empowering developers to create immersive, responsive, and highly interactive web applications. By harnessing the power of React, Angular, Vue, or other frameworks, you can unlock endless possibilities and bring your ideas to life on the web. So, continue exploring, experimenting, and pushing the boundaries of frontend development to achieve remarkable results.

]]> <![CDATA[ Angular Upgrades That Will Improve Your Developer Experience ]]> https://www.freecodecamp.org/news/angular-upgrades-to-improve-developer-experience/ 66b9fa152d0f884246b52442 Wed, 17 May 2023 23:40:59 +0000 When we talk about the Developer Experience, we're referring to the level of difficulty a developer faces when completing essential tasks.

Factors like the complexity of a development framework or the absence of syntactic sugar in a programming language can negatively impact it.

A robust modern framework can be complex. But Angular wouldn’t be so beloved if it didn't get easier to use with each new version.

Versions 14, 15, and 16 have many improvements that you may not know about and may want to take advantage of when you're migrating from one version to the next.

These improvements include:

  • succinct tree-shakable error messages
  • template auto-magic
  • required inputs
  • page title in route options
  • component-bound route data
  • CLI completion

Let's look at each of these features in more depth so you can use them in your Angular applications.

Succinct Tree-Shakable Error Messages

Now, tree-shaking mostly gets rid of unused code from a bundle. In this instance, it refers to the trimming of runtime error messages in production.

Runtime error messages and codes in Angular are not new. What is new are the less verbose production error messages.

In version 14, instead of long messages, you get their related error codes. And you can quickly look up these codes in the Angular documentation for debugging. You can view the longer detailed messages in development for further debugging.

Template Auto-Magic

In version 16, template self-closing tags help developers forgo the need to add closing tags to component selectors in templates. This is similar to the ubiquitous input HTML element that doesn't need a closing tag. For example: 

<!--Before-->

<app-root></app-root>

<!--After-->

<app-root />

Furthermore, upgrades to the Angular language service in version 16 make automatic imports of standalone pipes and components in templates possible. Like automatic class imports within components. Most code editors, like VS Code, use language services to support automatic imports through quick fixes.

In addition, version 14 introduced an additional template compiler option, a TypeScript configuration, called [extendedDiagnostics](https://angular.io/extended-diagnostics) to supplement template insights. This configuration helps the compiler find common template pitfalls like an optional chain when a value will never be null. If it is null, it’s either a bug or a mis-typed value.

These types of syntax errors are usually harder to spot since they don't always break the application.

Required Inputs

Inputs in Angular are vital in data-sharing from parent to child components. They specify what values are being passed to the child. Version 16 introduced required inputs to help developers remember to pass these data when using child components.

Missing data assigned to required inputs will trigger compile-time errors.

export class ChildComponent {
    @Input({ required: true }) someList: unknown[];
}

<!--In parent template-->

<child-one  /> <!--triggers compile-time error-->

<child-one [someList]="list" /> <!--no compile-time error-->

Perhaps further updates to required inputs may help delay rendering child components while the data is still falsy.

Page Title in Route Options

Page titles are important. Even more so for the Accessiblity Tree. You can see them in the pages’ browser tabs, like headings. The Accessibility Tree is the DOM that Accessibility tools, like screen readers, use to navigate through the web page.

Page titles summarize content for users which is useful for navigation. It can be easy to forget to set them, especially if setting them seems a little counterintuitive in development.

Version 14 introduced a title option to the [Route](https://angular.io/api/router/Route) interface  which you can  use to configure application routes. This allows each route to set its own page title. In addition, this option can be configured as a string or a function that resolves to a string for more dynamic titles.

const appRoutes: Route[] = [
{
    path: '/customers',
    component: CustomersComponent,
    title: 'Customers',
    children: [{
        path: ':id/customer',
        component: CustomerComponent,
        title: (route: ActivatedRouteSnapshot, state:     RouterStateSnapshot) => this.getRouteTitleForCustomer()
      }]
}
];

Component-Bound Route Data

While inputs have always been used for data-sharing between components in parent-child relationships, you can also use them for data-sharing between routed components in version 16.

Some application routing scenarios require passing data, like IDs, to components being routed to. This was possible through use of the injectable [ActivatedRoute](https://angular.io/api/router/ActivatedRoute) class in the components needing the data.

Developers can now get these data in through the components’ inputs, whether it's from the route resolvers or path and query parameters. These data values get tied to component inputs with matching names. So, a customerId data value from the route will correspond to a customerId input in the component. 

export class CustomerComponent {
    @Input() customerId: string;
}

const appRoutes: Route[] = [
{
    path: '/customers',
    component: CustomersComponent,
    title: 'Customers',
    children: [{
        path: ':id/customer',
        component: CustomerComponent,
        title: 'Customer',
        resolve: { customerId: (route: ActivatedRouteSnapshot, state:     RouterStateSnapshot) => this.getCustomerId()
          }
      }]
}
];

Be sure to enable component binding through the router.

CLI Completion

As for imperative coders and terminal lovers, version 14 brought command auto-completion through ng completion. This allows developers to get quick intuitive references for commands and their applicable options with a tab key press in the terminal. This makes using the CLI easier and faster.

Wrapping Up

The latest Angular versions 14, 15, and 16 contain many more requested changes that not only boost the Developer Experience, but also address many framework issues.

The Angular Blog and the documentation provide more details about all these changes with specific examples.

]]> <![CDATA[ Signals in Angular – How to Write More Reactive Code ]]> https://www.freecodecamp.org/news/angular-signals/ 66d45e01706b9fb1c166b920 Wed, 05 Apr 2023 00:53:15 +0000 By Deborah Kurata

An exciting new feature is coming to Angular: signals! Signals provide a new way for our code to tell our templates (and other code) that our data has changed. This improves Angular's change detection, which also improves performance, and makes our code more reactive.

You can try out this powerful new feature now. Signals are available for developer preview in Angular v16, due to be released in May of 2023. You can get early versions of Angular v16 to try it out now. I'll walk through how later in this tutorial.

Watch the associated video here for the concepts and a demonstration:

Find the sample code here: https://stackblitz.com/edit/angular-signals-deborahk

Before we jump into the details of the "what?" and "how?", let's start with the "why?". Why would you want to use this new signals feature?

Why Do We Need Signals?

Let's start with a simple example without the use of signals. Say you are writing code to perform some basic math operations.

let x = 5;
let y = 3;
let z = x + y;
console.log(z);

What does this code log to the console? Yep, it logs out 8.

Some time later in the code, we change the value of x. What does z log out now?

let x = 5;
let y = 3;
let z = x + y;
console.log(z);

x = 10;
console.log(z);

It still logs out 8! That's because a value is assigned to z when the expression is first evaluated. The z variable does not react to changes in x or y.

But we want our variables to react to changes!

One of the reasons we use Angular is to build reactive websites, like Figure 1. When the user updates the quantity, the related variables (such as subtotal and tax) should react and adjust the costs. If the user selects to delete an item from the cart, we again want the related variables to react and correctly recalculate the costs.

Image Figure 1. The cart reacts and recalculates when the user changes the quantity.

With signals, our code can be more reactive. Our prior example implemented with signals would look like this:

const x = signal(5);
const y = signal(3);
const z = computed(() => x() + y());
console.log(z()); // 8

x.set(10);
console.log(z()); // 13

We'll look at this syntax in detail shortly. For now, the code above defines two signals: x and y and gives them initial values of 5 and 3. We then define a computed signal, z, which is the sum of x and y. Since signals provide change notifications, when the x or y signals change, any values computed from those signals will automatically recalculate. This code is now reactive! Nice!

Computed signals react and recalculate when any of its dependent signals change. If a signal is bound in a template, when the signal changes, Angular's change detection automatically updates any view that reads the signal. And the user sees the changed value.

So the answer to "why do we need signals?":

  • Signals provide more reactivity
  • Using signals gives us finer control over change detection, which can improve performance.

Let's dive a bit deeper into what a signal is and how it is used.

What Is a Signal?

You can think of a signal as a value plus a change notification. A signal is just a special type of variable that holds a value. But unlike other variables, a signal also provides notification when the variable value changes.

Think of a normal variable as a shelf, like on the left side of Figure 2. When a value is assigned to the variable, it sits on that shelf. Any code within scope can simply read that variable on the shelf.

Image Figure 2. Metaphorically, a normal variable sits on a shelf. A signal is stored in a box that glows when it changes.

A signal is more like a box, as shown on the right side of Figure 2. Creating a signal metaphorically creates a box and puts the value inside of that box. The box glows when the value of the signal changes. To read the signal, first open the box using parentheses: x(). Technically speaking, we call the signal's getter function to read the signal.

We now have the answer to "what is a signal?":

  • A signal is a variable + change notification
  • A signal is reactive, and is called a "reactive primitive"
  • A signal always has a value
  • A signal is synchronous
  • A signal is not a replacement for RxJS and Observables for asynchronous operations, such as http.get

Where can we use signals?

  • Use them in components to track local component state
  • Use them in directives
  • Use them in a service to share state across components
  • Read them in a template to display signal values
  • Or use them anywhere else in your code

Next let's walk through how to create and use signals.

How to Create a Signal

To use a signal, you first create one.

quantity = signal<number>(1);

The above syntax creates and initializes a signal using the signal constructor function.

Optionally, provide a generic type parameter to define the signal's data type. A signal can be a string, number, array, object, or any data type. In many cases, the data type can be inferred and the generic type parameter is unnecessary.

Pass to the constructor the default value of the signal. A signal always has a value, starting with that default.

Here are some additional examples:

quantity = signal(1);

qtyAvailable = signal([1, 2, 3, 4, 5, 6]);

selectedVehicle = signal<Vehicle>({ 
  id: 1,
  name: 'AT-AT', 
  price: 19416.13
});

vehicles = signal<Vehicle[]>([]);

The first code line above creates a numeric signal with a default value of 1. Because the default value is a number, the quantity is a signal that holds a number. The generic type parameter isn't needed.

The second line is a signal that holds an array of numbers. The default provides an array of values 1 through 6. Again, the generic type parameter isn't needed in this case because it can be inferred from the default value.

The selectedVehicle signal holds a Vehicle object. In this example, the type cannot be inferred, so we specify a generic type parameter of Vehicle.

The vehicles signal holds an array of Vehicle objects. Its default is an empty array. To strongly type the array, we add a generic type parameter of <Vehicle[]>.

A signal created with the signal constructor function is writable, so you can set it to a new value, update it based on the current value, or mutate its content. We'll see examples of these operations shortly.

Once you've created a signal, you may want to read its value.

How to Read a Signal

Earlier, we represented a signal as a box. Metaphorically speaking, to read a signal's value you must first open the box. You do that by adding parentheses as shown below.

quantity();

Start with the signal name and follow it with open and closing parentheses. Technically speaking, this calls the signal's getter function. The getter function is created behind the scenes – you won't see it in your code.

When working with Angular, a common place to read signals is in the template.

<select
    [ngModel]="quantity()"
    (change)="onQuantitySelected($any($event.target).value)">
  <option *ngFor="let q of qtyAvailable()">{{ q }}</option>
</select>

<div>Vehicle: {{ selectedVehicle().name }}</div>
<div>Price: {{ selectedVehicle().price }}</div>
<div [style.color]="color()">Total: {{ totalPrice() }}</div>

The above template displays a select box for selection of a quantity. The [ngModel] reads the value of the quantity signal, binding to that value.

The change event binding calls the onQuantitySelected() method in the component.

The option element uses ngFor to iterate through each array element in the qtyAvailable signal. It reads the signal and creates a select option for each array element.

Below the select element are three div elements. The first one reads the selectedVehicle signal, then accesses its name property. The second div element reads the selectedVehicle signal, then displays its price property. The last div element reads the totalPrice signal (which we have not yet defined). And it sets the text color to the value from the color signal (which we also have not defined).

It's important to note that reading a signal always reads the current signal value. The code doesn't have any knowledge of any prior signal values.

When the user picks a different quantity from the select element, we want to change the value of the quantity signal. That way the quantity signal becomes the "source of truth" for the user's selected quantity. Let's look at how to do that next.

How to Change the Value of a Signal

The signal set method replaces the value of a signal with a new value. It basically opens the box, removes the current item, and sets in a new item to take its place.

this.quantity.set(qty);

A common scenario is to change the signal value based on a user action. For example:

  • The user selects a new quantity using the select element
  • The select element event binding calls the onQuantitySelected() method and passes in the selected quantity
  • The user action is handled in that event handler within the component
  • The new value is set into the quantity signal.

Here is an example event handler:

onQuantitySelected(qty: number) {
  this.quantity.set(qty);
}

Whenever the signal is set, the code notifies any consumers that the signal has changed. In this context, a consumer is any code that is interested in receiving change notifications.

How does the consumer indicate that it's interested in receiving notifications about a particular signal?

If code reads a signal, that code is notified when the signal changes.

If a template reads a signal, that template is notified when the signal changes and the view is scheduled to be re-rendered.

So the act of reading a signal registers the consumer's interest in watching that signal. The Angular team calls this the golden rule of signal components: "change detection for a component will be scheduled when and only when a signal read in the template notifies Angular that it has changed."

Here is an example to illustrate the process. Let's say that there is some work going on within the method below that needs to adjust the quantity. Maybe if the quantity is 5 or more you get one free, for example. The point is that the quantity signal could change several times within the execution of the method.

onQuantitySelected(qty: number) {
  this.quantity.set(qty);

  this.quantity.set(5);
  this.quantity.set(42);
}

The quantity is displayed in the template using Angular's binding as shown below. Since the binding reads the quantity signal, the template registers its interest in receiving change notifications.

{{ quantity() }}

When the user selects a quantity, the onQuantitySelected() method executes. The code in the method first sets the signal to the user-selected quantity. When the new signal is set, the signal generates a notification. At this point, Angular's change detection is scheduled to run. But it doesn't have an opportunity to run until after the execution of the onQuantitySelected() method.

The onQuantitySelected() method continues, setting the signal to 5. The signal generates another change notification. Again Angular's change detection is reminded that it needs to run, but it still can't run because the onQuantitySelected() method is still executing. The method then sets the signal to 42 and the process repeats.

When the onQuantitySelected() method has completed its execution, Angular's change detection can finally run. The template reads the signal, and gets the current value of that signal, which is 42. The template is not aware of any of the prior signal values. The view is then re-rendered, and the new quantity signal value is displayed.

If a signal is changed, any consumer interested in reading that signal is notified. But the consumer is not given the new value. The next time it's their turn to execute, the consumer reads the current value from the signal.

If you are familiar with RxJS and Observables, signals are quite different. Signals don't emit values like Observables do. And signals don't require a subscription.

In addition to the set(), there are two other ways to change a signal: update() and mutate().

The set() method replaces a signal with a new value, metaphorically replacing the contents of the signal box. Pass the new value into the set method.

// Replace the value
this.quantity.set(qty);

The update() method updates the signal based on its current value. Pass to the update method an arrow function. The arrow function provides the current signal value so you can update it as needed. In the code below, the quantity is doubled.

// Update value based on current value
this.quantity.update(qty => qty * 2);

The mutate() method modifies the content of a signal value, not the signal value itself. Use it with arrays to modify array elements, and objects to modify object properties. In the code below, a vehicle's price is increased by 20%.

this.selectedVehicle.mutate(v => v.price = v.price + (v.price * .20));

Regardless of how the signal is modified, consumers are notified that the signal was changed. The consumers can then read the new signal value when it's their turn to execute.

How to Define a Computed Signal

Oftentimes we have variables in our code that depend on other variables. For example, the total price for an item is the price for that item times the desired quantity of that item. If the user changes the quantity, we want to change the total price. For that, we use computed signals.

Define a computed signal by calling the computed creation function. The computed() function creates a new signal that depends on other signals.

Pass to the computed function a computation function that performs the desired operation. The operation reads the value of one or more signals to perform its computation.

totalPrice = computed(() => this.selectedVehicle().price * this.quantity());

color = computed(() => this.totalPrice() > 50000 ? 'green' : 'blue');

The first line of code above defines a totalPrice computed signal by calling the computed() creation function. The computation function passed into this computed function reads the selectedVehicle and quantity signals. If either signal changes, this computed signal is notified and will update when it is its turn to execute.

The second line of code defines a color computed signal. It sets the color to green or blue depending on the value of the totalPrice signal. The template can bind to this signal to display the appropriate style.

A computed signal is read only. It cannot be modified with set(), update() or mutate().

The value of a computed signal is re-computed when:

  • One or more of its dependent signals is changed.
  • AND the value of the computed signal is read.

The computed signal value is memoized, meaning it stores the computed result. That computed value is reused the next time the computed value is read.

Say for example we have this in our template:

Extended price: {{ totalPrice() }}
Total price: {{ totalPrice() }}
Amount due: {{ totalPrice() }}

The first time that the template reads the totalPrice computed signal, the value is calculated and stored in memory. The other two times the totalPrice signal is read, the stored value is reused. The value is not recalculated unless one of its dependent signals changes.

How to Use an Effect

There may be times that you need to run code when a signal changes, and that code has side effects. By side effects I mean code that calls an API or performs another operation not related to the signal. In these cases, you'll use an effect().

For example, you want to debug your signals and log out the signal value each time the code reacts to a change to that signal. Calling console.log() is a side effect.

To define an effect, call the effect() creation function. Pass to the function the operation to perform. This operation is re-executed every time the code reacts to a change in any dependent signal.

effect(() => console.log(this.selectedVehicle()));

The effect() function can be called within other function. Since the effect sets up a handler of sorts, it is often called in the constructor or other startup code.

Alternatively, an effect can be defined declaratively as shown below:

e = effect(() => console.log(this.selectedVehicle()));

An effect should not change the value of any signals. If you need to change a signal based on a change to a dependent signal, use a computed signal instead.

You'll find that you won't use effects often. Though they are useful for logging, or calling other external APIs. (But don't use them to work with RxJS and Observables. There will be signal features to convert to and from Observables.)

When to Use Signals

Here are some suggestions for when to use signals.

First, continue to use event handlers in a component as you do now for user actions. Actions such as a selection from a drop down list, a click on a button, or an entry in a textbox.

Use a signal or a computed signal in a component for any state that could change. In this context, state refers to any data that the component manages. Everything from an isLoading flag to the current displayed "page" of data to the user's selected filter criteria could be signals. Signals are especially useful when displaying data in the template when that data should react to other actions.

Put shared signals in services. The array of vehicles returned in an Observable could be transformed into a signal. Any totals could also be signals in a service if those signals are shared between components.

Continue to use Observables for asynchronous operations, such as http.get(). There are more features coming to signals to map a signal to and from an Observable.

Wrapping Up

Signals represent a major advancement in Angular's reactive programming capabilities and change detection features.

This tutorial answered the questions: "Why?", "What?" and "How?". And we threw in "Where?" and "When?", too.

Signals are available as a developer preview in Angular v16. As part of that preview, signals are integrated into the existing change detection model. Future signal features expect to improve change detection and mark components for check, somewhat like OnPush change detection that we have today with the async pipe.

An easy way to try out signals is to use stackblitz, which is an online editor that works well with Angular and doesn't require any installation. To use stackblitz with signals:

  1. Navigate to the stackblitz website: www.stackblitz.com.
  2. Click the Angular icon to create an Angular project.
  3. Edit the resulting package.json file and change the versions of the @angular packages to the latest pre-release of Angular v16.
  4. Save the project to refresh dependencies.
  5. Try out signals!

To see these steps in action, check out the demo provided near the end of this video:

Or start with my stackblitz link: https://stackblitz.com/edit/angular-signals-deborahk. Be sure to fork my project to try out your own changes.

Signals are coming! They'll improve our code's reactivity and change detection. They'll make our code easier to create and read. And they are great fun!

]]> <![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[ Chart.js Tutorial – How to Make Marimekko Charts in Angular ]]> https://www.freecodecamp.org/news/chart-js-tutorial-how-to-make-marimekko-charts-in-angular/ 66d46149706b9fb1c166b9ab Tue, 21 Mar 2023 17:51:26 +0000 By Swatej Patil

Data visualization is an essential part of data analysis. And charts are one of the most effective ways to present data in a clear and concise manner.

Marimekko charts are an excellent choice for displaying complex data sets in a compact and visually appealing format.

A Marimekko chart, also known as a mosaic chart or mekko chart, is a combination of a stacked bar chart and a 100% stacked bar chart. The width of each bar represents the total value of the corresponding category, and the height of each bar represents the relative contribution of each sub-category to that total.

In this tutorial, we will explore how to create a Marimekko chart using Chart.js, a powerful charting library. We'll delve into the details of how to structure the data for Marimekko charts, as well as how to customize the chart's appearance and behavior using Chart.js options and APIs.

Getting Started

I am assuming that you already have familiarity with creating simple line and bar charts using Chart.js in an Angular application. In this guide, there are certain concepts that will be easier to comprehend if you have prior knowledge.

Don't worry if you don't – I've got you covered. You can follow my Chart.js Tutorial – How to Make Bar and Line Charts in Angular to get started.

How to Structure Data for Marimekko Charts

Let's discuss the data structure required for Marimekko charts before creating the chart.

Marimekko charts need an array of objects, with each object representing a category. Each object must have a label and a sub-array of objects, where each sub-object represents a sub-category.

Each sub-object must have a label and a value. The value represents the proportion of the sub-category in relation to the total of its category.

Here's an example of how to structure data for a Marimekko chart:

data: [
  {
    label: 'Category 1',
    subcategories: [
      { label: 'Subcategory 1', value: 10 },
      { label: 'Subcategory 2', value: 20 },
      { label: 'Subcategory 3', value: 30 }
    ]
  },
  {
    label: 'Category 2',
    subcategories: [
      { label: 'Subcategory 1', value: 40 },
      { label: 'Subcategory 2', value: 50 },
      { label: 'Subcategory 3', value: 60 }
    ]
  }
]

In this example, we have two categories: Category 1 and Category 2, with three subcategories each. The values for the subcategories represent the proportion of the subcategory in relation to the total of its category. For example, in Category 1, Subcategory 1 represents 10 out of 60, or 16.7% of the total.

How to Create a Marimekko Chart with Chart.js

Now that we have our data structured correctly, let's move on to creating our Marimekko chart using Chart.js.

First, we need to create a canvas element in our HTML code to hold the chart:

<canvas id="marimekkoChart"></canvas>

Next, we'll need to install Chart.js and import it into our Angular component:

npm install chart.js

import Chart from 'chart.js/auto';

In our component class, we can then create a new Chart object and pass in our data and options:

ngAfterViewInit() {
  const canvas = document.getElementById('marimekkoChart') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

  const data = {
    labels: ['Category 1', 'Category 2'],
    datasets: [
      {
        label: 'Subcategory 1',
        data: [10, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 2',
        data: [20, 50],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 3',
        data: [30, 60],
        backgroundColor: 'rgba(255, 206, 86, 0.7)',
        borderWidth: 1
      }
    ]
  };

  const options = {
    indexAxis: 'y',
    plugins: {
      legend: {
        position: 'bottom'
      }
    }
  };

  const marimekkoChart = new Chart(ctx, {
    type: 'bar',
    data: data,
  });
}

In this example, we're creating a Marimekko chart with three subcategories for two categories. We've set the type of chart to 'bar', and we're passing in our data and options. The 'indexAxis' option is set to 'y' to make the chart horizontal, and the 'legend' option is set to position the legend at the bottom of the chart.

Congratulations! If you have followed along carefully then you shouldn’t run into any errors and your output may look like the following:

Image

And that's it! With this code, we can create a Marimekko chart in Chart.js in Angular.

You can further customize your chart using various Chart.js options and APIs, such as adjusting the colors, labels, and tooltip behaviors, to make it even more informative and engaging.

Conclusion

Chart.js is a very useful and powerful library. In this quick tutorial, we've covered how to create a Marimekko chart in Chart.js in Angular. If you want to include any type of chart in your Angular application, then it is very easy to make them with Chart.js.

The full code for this Angular application is hosted on my GitHub Repo.

I hope you found this tutorial helpful and informative. If you have any questions or feedback, feel free to to contact me on LinkedIn!

Photo by Austin Distel on Unsplash.

]]> <![CDATA[ Chart.js Tutorial – How to Make Pie and Doughnut Charts in Angular ]]> https://www.freecodecamp.org/news/how-to-make-pie-and-doughnut-charts-using-chartjs-in-angular/ 66d46150d14641365a050973 Tue, 31 Jan 2023 17:03:23 +0000 By Swatej Patil

In this tutorial we will learn how to create a simple pie and doughnut chart using the Chart.js library in an Angular application.

What is Chart.js?

Chart.js is a JavaScript library for building charts. It's designed to be intuitive and simple, but it's powerful enough to build complex visualizations.

It has a wide range of chart types, including bar charts, line charts, pie charts, scatter plots, and many more. Chart.js is open-source and can be used without any restrictions on private or commercial projects.

Prerequisites

Before we get started with making the charts, just make sure you meet the following prerequisites:

  • Basic understanding of HTML /CSS and TypeScript especially the understanding of Object Oriented concepts of TypeScript classes and methods.
  • Node.js version 10 or higher and NPM or Yarn package manager. You can download node.js from here.

How to Install Angular CLI

We will be using the Angular CLI to generate a starter application for our project. You can install Angular CLI by executing the following command on a terminal or Powershell window:

npm install -g @angular/cli

If you have Angular CLI installed already, you can skip this step.

How to Create a Angular Application

Now let’s create an Angular application that will hold our graphs. In a terminal, execute the following commands:

 ng new angular-chartjs

Now that our Angular application has been created, navigate to the project folder and start the local development server using the following command:

cd angular-chartjs
ng serve -o

A browser window will open on http://localhost:4200/ and you can see your running Angular application.

How to Install the Chart.js Package

Now open a new terminal window in the same directory and install the Chart.js library using the following:

npm install chart.js

Now we need to create two Angular components, one for the Pie graph and the other for the Doughnut chart. You can create them easily with the angular CLI by executing the following commands:

ng generate component pie-chart
ng generate component doughnut-chart

How to Create a Pie Chart in Chart.js

A pie chart is a circular graph that displays data in slices, where each slice represents a category of data. The size of each slice represents the proportion of the category in relation to the whole data set.

Pie charts are an effective way to show the breakdown of data into categories, especially when the data represents parts of a whole. They are useful when you want to show how much each category contributes to the total.

When to use pie charts:

  • To show the proportions of different categories in a whole
  • To compare the relative sizes of different categories
  • To demonstrate how each category contributes to the whole

Pie charts are commonly used in business and economics to show the distribution of expenditures, market shares, or other aspects of the company's performance.

Now that we have created the components, we will move on with creating the pie chart.

Navigate to the /src/app/pie-chart component and open the pie-chart.component.html file and paste the following code:

<div class="chart-container">
      <canvas  id="MyChart" >{{ chart }}</canvas>
</div>

We have simply created a container, and inside that container a canvas with an id of MyChart. We have used Angular’s string interpolation to render the chart variable, which we will create soon.

Inside the pie-chart component, open the pie-chart.component.ts file and import the Chart.js library using the following command:

import Chart from 'chart.js/auto';

Now let’s make the chart variable we mentioned earlier. This variable will hold the information of our graphs.

public chart: any;

Now we will create a method for the pie chart. This will include the data and labels for our chart.

Copy the following code and paste it in the pie-chart.component.ts file below the ngOnInit() function:

createChart(){

    this.chart = new Chart("MyChart", {
      type: 'pie', //this denotes tha type of chart

      data: {// values on X-Axis
        labels: ['Red', 'Pink','Green','Yellow','Orange','Blue', ],
           datasets: [{
    label: 'My First Dataset',
    data: [300, 240, 100, 432, 253, 34],
    backgroundColor: [
      'red',
      'pink',
      'green',
            'yellow',
      'orange',
      'blue',            
    ],
    hoverOffset: 4
  }],
      },
      options: {
        aspectRatio:2.5
      }

    });
  }

Here we have set the type of chart as pie. We have given labels as the names of common colors. And we've added data values, which will be automatically allocated a portion of pie in the pie chart.

We want our createChart() function to run as soon as the page loads. In order to do that, we need to call the function in the ngOnInit():

ngOnInit(): void {
    this.createChart();
  }

Finally, we need to add the HTML selector of the pie-chart component to the app.component.html file. Remove the initial template code of Angular and add the following:

<app-pie-chart></app-pie-chart>

Save all the files and the browser window will refresh automatically. Your first pie chart is ready!

Image Our pie chart

How to Create a Doughnut Chart in Chart.js

A doughnut chart is a variation of the pie chart and serves the same purpose of representing data in a circular format. It is made up of multiple sectors, where each sector represents a data value, with the size of each sector proportional to its value.

You can use a doughnut chart:

  • To show a parts-to-whole relationship in data
  • To compare different categories of data
  • To show progress towards a goal or target

Now we will move on with creating the doughnut chart. Since Doughnut charts and Pie charts can be used interchangeably, we don’t need to modify anything except the type of chart. Just follow the same steps you have done so far and make sure to do them on the doughnut chart component.

Paste the same code for createChart() method on the doughnut-chart.component.ts file below the ngOnInit() function. You just need to change the keyword for type of chart from pie to doughnut. Your code should look like the following:

createChart(){

    this.chart = new Chart("MyChart", {
      type: 'doughnut', //this denotes tha type of chart

      data: {// values on X-Axis
        labels: ['Red', 'Pink','Green','Yellow','Orange','Blue', ],
           datasets: [{
    label: 'My First Dataset',
    data: [300, 240, 100, 432, 253, 34],
    backgroundColor: [
      'red',
      'pink',
      'green',
            'yellow',
      'orange',
      'blue',            
    ],
    hoverOffset: 4
  }],
      },
      options: {
        aspectRatio:2.5
      }

    });
  }

Call the createChart() function in ngOnInit() and your line chart will be ready.

ngOnInit(): void {
    this.createChart();
  }

Finally, we need to add the HTML selector for the line-chart component to the app.component.html file.

<app-doughnut-chart></app-doughnut-chart>

Your output may look like the following:

Image Our doughnut chart

Conclusion

Chart.js is a very useful and powerful library. If you want to include any type of chart in your Angular application, then it is very easy to make them with Chart.js.

The full code for this Angular application is hosted on my GitHub Repo.

I hope you found this tutorial helpful. Thank you for reading!

]]> <![CDATA[ How to Add ESLint to an Angular Application ]]> https://www.freecodecamp.org/news/how-to-add-eslint-to-an-angular-application/ 66d460c9c7632f8bfbf1e495 Tue, 15 Nov 2022 16:39:58 +0000 By Rodrigo Kamada

In this article, we'll build a web application using the latest version of Angular. Then we'll add ESLint which analyzes the JavaScript code statically to find any problems.

Prerequisites

Before you start, you need to install and configure the tools below (if you don't already have them installed) to create the Angular application:

  • Git: Git is a distributed version control system. We'll use it to sync the repository.
  • Node.js and npm: Node.js is a JavaScript code runtime software based on Google's V8 engine. npm is a package manager for Node.js (Node Package Manager). We'll use them to build and run the Angular application and install the libraries.
  • Angular CLI: Angular CLI is a command line utility tool for Angular. We'll use it to create the base structure of the Angular application.
  • IDE (for example Visual Studio Code or WebStorm): an Integrated Development Environment is a tool with a graphical interface to help in the development of applications. We'll use it to develop the Angular application.

Getting Started

Create the Angular application

Angular is a development platform for building web, mobile and desktop applications using HTML, CSS, and TypeScript (JavaScript). Currently, Angular is at version 14 and Google is the main maintainer of the project.

First, let's create the application with the Angular base structure using the @angular/cli with the route file and the SCSS style format.

ng new angular-eslint --routing true --style scss
CREATE angular-eslint/README.md (1067 bytes)
CREATE angular-eslint/.editorconfig (274 bytes)
CREATE angular-eslint/.gitignore (548 bytes)
CREATE angular-eslint/angular.json (3136 bytes)
CREATE angular-eslint/package.json (1045 bytes)
CREATE angular-eslint/tsconfig.json (863 bytes)
CREATE angular-eslint/.browserslistrc (600 bytes)
CREATE angular-eslint/karma.conf.js (1431 bytes)
CREATE angular-eslint/tsconfig.app.json (287 bytes)
CREATE angular-eslint/tsconfig.spec.json (333 bytes)
CREATE angular-eslint/.vscode/extensions.json (130 bytes)
CREATE angular-eslint/.vscode/launch.json (474 bytes)
CREATE angular-eslint/.vscode/tasks.json (938 bytes)
CREATE angular-eslint/src/favicon.ico (948 bytes)
CREATE angular-eslint/src/index.html (299 bytes)
CREATE angular-eslint/src/main.ts (372 bytes)
CREATE angular-eslint/src/polyfills.ts (2338 bytes)
CREATE angular-eslint/src/styles.scss (80 bytes)
CREATE angular-eslint/src/test.ts (749 bytes)
CREATE angular-eslint/src/assets/.gitkeep (0 bytes)
CREATE angular-eslint/src/environments/environment.prod.ts (51 bytes)
CREATE angular-eslint/src/environments/environment.ts (658 bytes)
CREATE angular-eslint/src/app/app-routing.module.ts (245 bytes)
CREATE angular-eslint/src/app/app.module.ts (393 bytes)
CREATE angular-eslint/src/app/app.component.scss (0 bytes)
CREATE angular-eslint/src/app/app.component.html (23364 bytes)
CREATE angular-eslint/src/app/app.component.spec.ts (1097 bytes)
CREATE angular-eslint/src/app/app.component.ts (219 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

Now we will install the libraries and add the ESLint settings.

ng add @angular-eslint/schematics
ℹ Using package manager: npm
✔ Found compatible package version: @angular-eslint/schematics@14.2.5.
✔ Package information loaded.

The package @angular-eslint/schematics@14.2.5 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.

    All @angular-eslint dependencies have been successfully installed 🎉

    Please see https://github.com/angular-eslint/angular-eslint for how to add ESLint configuration to your project.

    We detected that you have a single project in your workspace and no existing linter wired up, so we are configuring ESLint for you automatically.

    Please see https://github.com/angular-eslint/angular-eslint for more information.

CREATE .eslintrc.json (984 bytes)
UPDATE package.json (1511 bytes)
UPDATE angular.json (3447 bytes)
✔ Packages installed successfully.

Next, we will run the command below to validate the ESLint installation and configuration:

npm run lint

> angular-eslint@1.0.0 lint /home/rodrigokamada/angular-eslint
> ng lint


Linting "angular-eslint"...

All files pass linting.

And you're all set! The message "All files pass linting" shows that no problems were found.

The application repository is available here.

Conclusion

This is what we covered in this article:

  • We created an Angular application.
  • We added ESLint to analyze and find problems with the code.

You can use this to check your application code before deploying to your environment.

Thank you for reading and I hope you enjoyed the article!

This tutorial was posted on my blog in Portuguese.

To stay updated whenever I post new articles, follow me on Twitter and LinkedIn.

]]> <![CDATA[ Build a Webshop with Angular, Node.js, TypeScript, & Stripe ]]> https://www.freecodecamp.org/news/build-a-webshop-with-angular-node-js-typescript-stripe/ 66b200ec09c44225ad2c3973 Wed, 12 Oct 2022 13:46:34 +0000 Learn how to build a webshop from scratch!

We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to build a webshop or e-commerce store using Angular/TypeScript, Express.js, and Stripe.

You will learn how to use Angular material and Tailwind to structure the UI and how to integrate a store API into the app. Also at the end, you will build a checkout, and learn how to integrate Stripe so that the app can process payments.

Slobodan Gajic created this course. Slobodan is a senior frontend developer and an experienced course creator.

Image You will build this.

Here are the sections in this course:

  • Installing dependencies and project setup
  • Building home page
  • Building cart page
  • Implementing Cart logic
  • Implementing Store API
  • Stripe payment implementation

Watch the full course below or on the freeCodeCamp.org YouTube channel (4-hour watch).

]]> <![CDATA[ How to Add the Chart.js Zoom Plugin to an Angular App ]]> https://www.freecodecamp.org/news/chart-js-zooom-plugin/ 66d4614b4a0edd9b48e83591 Mon, 12 Sep 2022 18:38:17 +0000 By Swatej Patil

In this tutorial you will learn how to the Add Chart.js Zoom plugin to an Angular application.

When you have a lot of data in a chart, you may want to zoom in and see the details. Line charts are a good way to visualise large amounts of data. You can use the zooming feature in Chart.js to explore your data more closely.

Chart.js is an open-source library you can use to create beautiful charts in any part of your Angular application. The Zooming feature was created to allow you to magnify certain data points for closer inspection. You can quickly and easily zoom by scrolling with the mouse wheel.

Let's see how it works.

Getting Started

I'm going to assume that you already know how to use Chart.js in an Angular application to create simple line and bar charts.

Don't worry if you don't – I've got you covered. You can follow my Chart.js Tutorial – How to Make Bar and Line Charts in Angular to get started.

We will create a new Angular component just for the line chart and then incorporate the zoom plugin into it. We will be using a large amount of data to see how useful the Zoom plugin is.

But first, in your Angular application, you'll need to install the Chart.js Zoom plugin if you don't already have it.

Open up a new terminal in the Angular project folder and paste in the following command:

npm install chartjs-plugin-zoom

This will install the plugin into your Angular application.

Now let’s create a new Angular component and make the line chart. Use the following to create a new Angular component:

ng g c line-chart

This will create a new Angular component in the /src directory.

Then open the line-chart.component.html file and paste in the following code:

<div class="chart-container">
      <canvas  id="MyChart" >{{ chart }}</canvas>
</div>

Now open the line-chart.component.ts file and delete all the code inside it. Then paste in the following code:

import { Component, OnInit } from '@angular/core';
import Chart from 'chart.js/auto';

@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    this.createChart();
  }
  public chart: any;

  createChart() {

    this.chart = new Chart("MyChart", {
      type: 'line', //this denotes tha type of chart

      data: {// values on X-Axis
        labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
        datasets: [
          {
            label: "Sales",
            data: ['467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573', ],
            backgroundColor: 'blue',
            borderColor: "#084de0"
          }
        ]
      },
      options: {
        aspectRatio: 3
      }

    });
  }

}

Again, if you don’t know how this code works, you can always refer back to this Chart.js Tutorial.

We need to add the HTML selector of the line-chart component to the app.component.html file. Remove the initial template code of Angular and add the following:

<app-line-chart></app-line-chart>

Start the local development server using the following command:

ng serve -o

A browser window will open on http://localhost:4200/ and you can see your running Angular application.

Image

As you can see, in order to present the entire chart, this graph begins to skip some labels. It will seem more worse if the graph has more data.

Let's now add a zooming function to our chart so we can enlarge the data points for a closer look.

How to Add the Chart.js Zoom Plugin

Open the line-chart.component.ts file and import the chart.js Zoom plugin. Make sure you register it after importing it. The following code will show you how to do it:

import zoomPlugin from 'chartjs-plugin-zoom';
Chart.register(zoomPlugin);

Now that you have imported the plugin, in the Chart.js option we will add the plugin and enable the zoom on the wheel.

options: {
        aspectRatio: 3,
        plugins: {
          zoom: {
            zoom: {
              wheel: {
                enabled: true,
              },
              pinch: {
                enabled: true
              },
              mode: 'xy',
            }
          }
        }
      }

Image

As you can see , now we can zoom in into the point we want to see closely.

Wrapping Up

The full code for this Angular application is hosted on my GitHub.

I hope you found this tutorial helpful.If you have any questions or comments, please do not hesitate to contact me on LinkedIn. I'll be more than pleased to assist you with your questions.

Thank you for reading!

Photo by Isaac Smith on Unsplash

]]> <![CDATA[ Angular for Beginners Course + TypeScript [Full Front-End Tutorial] ]]> https://www.freecodecamp.org/news/angular-for-beginners-course/ 66b20079297cd6de0bd545e7 Wed, 07 Sep 2022 16:45:24 +0000 Angular is a popular TypeScript-based open-source web application framework created by Google.

We just published a comprehensive 18-hour Angular course for beginners on the freeCodeCamp.org YouTube channel.

In this course you will first you will learn the basics of TypeScript. Then you will learn about important Angular concepts such as binding, dependency injection, forms, routing, and more.

Santosh Yadav created this course. He is a Google Developer Expert for Angular, a GitHub Star, and an active contributor to both Angular and NgRx. So he is the perfect person to teach you Angular.

Here are the sections covered in this course:

Introduction

  • Introduction to Angular
  • Introduction to Typescript
  • SPA and Local Setup

Typescript

  • Typescript Data Types and Functions
  • Classes and Interface
  • Typescript decorators and tsconfig file

Angular Installation and Basics

  • Angular Installation and Binding Syntax
  • Built-in Directives
  • Built-in Pipes
  • Adding Bootstrap CSS to App

Lifecycle Hook and Component Communication

  • ngOnInt and Component Communication using Input and Output
  • Change Detection and ngOnChanges
  • ngDoCheck
  • ViewChild, ViewChildren and AfterViewInit
  • Content Projection, AfterContentInit and OnDestroy

Dependency Injection

  • Introduction
  • Resolution Modifiers
  • Value Providers

HttpClient and RxJs

  • Setting Up HttpClientModule
  • HttpService , RxJs observables and http get
  • RxJs Observable and Observer
  • Http Put and Delete
  • Http Request
  • ShareReplay RxJs Operators
  • Async Pipe
  • catchError operator
  • map operator
  • Http Interceptor
  • APP_INITIALIZER

Routing Basics

  • Angular Router and default Route
  • Adding Angular material and navigation
  • Wild card, dynamic route and ActivatedRoute service
  • ParamMap and Activate Route Service

Template Driven Forms

  • Introduction
  • Validation
  • Pristine, Dirty State and Reset Form
  • Custom Directives and Custom Validation

Advanced Routing

  • Navigation using Router Service
  • Feature and Routing Module
  • Nested and Child Route
  • Lazy Loading
  • Configure Lazy Loading using CLI
  • Using ProvidedIn Any
  • Router Events
  • Listening to Router Events

Route Guards

  • CanActivate
  • CanActivateChild
  • CanLoad

Reactive Forms

  • Introduction
  • Using Material Controls
  • Nested Form Controls
  • Dynamic Forms
  • Built-in Validators
  • Reset Form
  • Control Level Validation
  • SetValue and PatchValue
  • ValueChanges and UpdateOn
  • map operator with Form
  • Custom Validator

CanDeactivate Guard

  • CanDeactivate Guard and Form

Custom Pipes and Errors

  • Custom Pipe
  • Resolve Guard
  • Error Handling

Testing Basics

  • Introduction
  • First test
  • Testing Component and Service
  • Deployment and CI/CD
  • Using Netlify for Deployment
  • GitHub Actions to Automate Tasks

Watch the full course below or on the freeCodeCamp.org YouTube channel (18-hour watch).

]]> <![CDATA[ Chart.js Tutorial – How to Make Bar and Line Charts in Angular ]]> https://www.freecodecamp.org/news/how-to-make-bar-and-line-charts-using-chartjs-in-angular/ 66d4614da326133d12440a8e Tue, 23 Aug 2022 15:35:01 +0000 By Swatej Patil

In this tutorial we will learn how to create simple bar and line charts using the Chart.js library in an Angular application.

But first of all, what is Chart.js and what does it do?

What is Chart.js?

Chart.js is a JavaScript library for building charts. It's designed to be intuitive and simple, but powerful enough to build complex visualizations. It has a wide range of chart types including bar charts, line charts, pie charts, scatter plots, and many more.

ChartJs is open-source and you can use it without any restrictions on private or commercial projects. It's written in pure JavaScript and has no dependencies on other libraries such as jQuery or D3.

It also provides options for animating data updates and adding interactivity to charts such as tooltips and click events.

It was created by the team at Plotly and it’s free to use.

Now we can move on with creating our first bar graph in Chart.js

##Prerequisites Before we get started making the charts, just make sure you meet the following prerequisites:

  • You have a basic understanding of HTML, CSS, and TypeScript, especially Object Oriented concepts of TypeScript classes and methods.
  • You have Node.js version 10 or higher and NPM or Yarn package manager. You can download Node.js from here.

How to Install Angular CLI

Angular CLI is an official tool from the developers of Angular. It is a command-line interface tool which is very useful for initialising and developing Angular applications.

You can install Angular CLI by executing the following command in a terminal or powershell window:

npm install -g @angular/cli

How to Create an Angular Application

Now let’s create an Angular application that will hold our graphs. In a terminal, execute the following commands:

 ng new angular-chartjs

Now that you've created your angular application, navigate to the project folder and start the local development server using the following command:

cd angular-chartjs
ng serve -o

A browser window will open on http://localhost:4200/ and you can see your running Angular application there.

Now open a new terminal window in the same directory and install the Chart.js library using the following command:

npm install chart.js

Now we need to create two angular components: one for the Bar graph and the other for the line chart.

You can create them easily with the Angular CLI by executing the following commands:

ng generate component bar-chart
ng generate component line-chart

How to Create a Bar Graph with Chart.js

A bar graph is a graphical representation of data, in which the horizontal and vertical axes represent the values, and the length of each bar represents the values specified on the axis.

Bar graphs are one of the most common forms of graphs when it comes to representing data visually. We use them to identify trends and patterns in various data sets.

When to use bar charts:

  • To show multiple values at once
  • To provide a graphical representation of data
  • To compare datasets
  • To examine relationships between different variables.

A bar chart is often used in business and economics to show comparisons between products, services, or companies. In our example, we have taken the data of sales and profits made on each day during an 8-day period.

Now that we have created the components, we will move on with creating the bar chart.

Inside the bar-chart component, open the bar-chart.component.html file and paste the following code:

<div class="chart-container">
      <canvas  id="MyChart" >{{ chart }}</canvas>
</div>

We have simply created a container and inside that container a canvas with an id of MyChart. We have used Angular’s string interpolation to render the chart variable, which we will create in the canvas.

Inside the bar-chart component, open the bar-chart.component.ts file and import the Chart.js library using the following commands:

import Chart from 'chart.js/auto';
//or
import Chart from 'chart.js';

Now let’s make the chart veritable we mentioned earlier. This variable will hold the information of our graphs.

public chart: any;

Now we will create a method for the bar chart. This will include the data and labels for our bar chart. Copy the following code and paste it in the bar-chart.component.ts file below the ngOnInit() function:

createChart(){

    this.chart = new Chart("MyChart", {
      type: 'bar', //this denotes tha type of chart

      data: {// values on X-Axis
        labels: ['2022-05-10', '2022-05-11', '2022-05-12','2022-05-13',
                                 '2022-05-14', '2022-05-15', '2022-05-16','2022-05-17', ], 
           datasets: [
          {
            label: "Sales",
            data: ['467','576', '572', '79', '92',
                                 '574', '573', '576'],
            backgroundColor: 'blue'
          },
          {
            label: "Profit",
            data: ['542', '542', '536', '327', '17',
                                     '0.00', '538', '541'],
            backgroundColor: 'limegreen'
          }  
        ]
      },
      options: {
        aspectRatio:2.5
      }

    });
  }

The above code might look daunting at first, but it's quite simple. We are providing the type of chart, the labels, and the data.

We want our createChart() function to run as soon as the page loads. In order to do that we need to call the function in the ngOnInit() like this:

ngOnInit(): void {
    this.createChart();
  }

Finally, we need to add the HTML selector of the bar-chart component to the app.component.html file.. Remove the initial Angular template code and add the following:

<app-bar-chart></app-bar-chart>

Congratulations! If you have followed along carefully then you shouldn’t run into any errors and your output may look like the following:

Image

How to Create a Line Graph with Chart.js

Line charts similar to bar charts are often used to show trends in data over time, such as economic growth or changes in stock prices.

Line charts are also useful for showing changes in quantities, such as population over time or weight loss over a period of weeks.

With a line graph, as opposed to a bar graph, you draw individual points on the two axes and connect nearby points with straight lines.

When to use bar charts:

  • When the differences in data points are smaller
  • To show trends over the course of time

If you have created the bar graph, then creating a line graph is quite simple. Just follow the same steps you have done so far (and make sure to do them on the line chart component).

Paste the same code for createChart() method on the line-chart.component.ts file below the ngOnInit() function. You just need to change the keyword for type of chart from bar to line.

Your code should look like the following:

createChart(){

    this.chart = new Chart("MyChart", {
      type: 'line', //this denotes tha type of chart

      data: {// values on X-Axis
        labels: ['2022-05-10', '2022-05-11', '2022-05-12','2022-05-13',
                                 '2022-05-14', '2022-05-15', '2022-05-16','2022-05-17', ], 
           datasets: [
          {
            label: "Sales",
            data: ['467','576', '572', '79', '92',
                                 '574', '573', '576'],
            backgroundColor: 'blue'
          },
          {
            label: "Profit",
            data: ['542', '542', '536', '327', '17',
                                     '0.00', '538', '541'],
            backgroundColor: 'limegreen'
          }  
        ]
      },
      options: {
        aspectRatio:2.5
      }

    });
  }

Call the createChart() function in ngOnInit() and your line chart is ready.

ngOnInit(): void {
    this.createChart();
  }

Finally, we need to add the HTML selector of the line-chart component to the app.component.html file.

<app-line-chart></app-line-chart>

Your output may look like the following:

Image

The full code for this Angular application is hosted on my GitHub Repo.

I hope you found this tutorial helpful. Thank you for reading!

Photo by Luke Chesser | Unsplash

]]>