<![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, 24 May 2026 16:30:37 +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 Transform an Angular Application with Signals ]]> https://www.freecodecamp.org/news/how-to-transform-an-angular-appl-with-signals/ 66e03251e308fdd18efc9b15 Tue, 10 Sep 2024 11:49:37 +0000 Angular is a famous framework for building robust and complex enterprise applications. It is widely used by large companies. Therefore, having the skills to build a performant application using Angular is one of the top skills for a developer..

Angular's rise to fame can be attributed to a special feature called reactivity. Reactivity is the ability of the framework to change the user interface (UI) when underlying data or state of the application changes.

This change can be due to asynchronous events like getting response from an API call, or from a user action such as clicking a button. To achieve this reactivity, Angular deploys a mechanism called change detection. Reactivity is a double-edged sword though, and can often lead to performance issues due to unwanted updates to UI.

Angular recently released a new feature called signals, which allows developers to improve the performance of existing applications built with Angular, as well build new applications which have significant performance gains over traditional Angular applications.

Signals give you control over change detection, and prevent unwanted updates to UI. It can be very tricky to transform existing applications to use signals, and this tutorial aims to guide you on getting started with it. In this tutorial, an existing Angular application, which was built traditionally, will be transformed step by step to use signals.

Table of Contents

Prerequisites

To follow this tutorial you must meet below prerequisites:

  • Have an understanding of JavaScript, TypeScript and the Angular framework.

  • Node.js and NPM installed on your machine. You can verify this using these commands: node -v and npm --version.

  • Git installed on your machine. You can verify this using git --version.

    node, npm, and git version in the terminal

  • A code editor installed on your machine. This tutorial has been developed using Visual Studio Code, but any code editor should work.

How to Run an Existing Application

We'll transform an existing application using Angular signal. The application is a timesheet management application in which a team lead/shift manager can see the number of hours each employee has worked each week, as well as team total hours.

The team lead can also update the hours of an employee as well. Follow the steps below to clone and run the application locally on your machine:

  • Clone the application using the GitHub URL - https://github.com/anujkumartech/emp-time-tracker-1.git. You can use terminal or clone it directly inside your editor.

  • After cloning the app, open a new terminal if not already opened and go to the application folder using cd emp-time-tracker-1.

  • Once you are inside the application folder, install the project dependencies using npm install.

After dependencies have been installed, open the application using npm start. Once the application has started, navigate to http://localhost:4200/ and you should see the below page rendered.

Existing Application Home Page

Understanding the Existing Application Code

It is very important to understand the code and component architecture which renders the application. Open the application in your code editor by navigating to src -> app. You should see a structure like this.

Code Directory

This application has two main components, the parent component and the child component. The parent component displays the team’s cumulative hours as well a list of employees reporting to the team lead and each employee’s total hours and overtime hours. The parent component has necessary code to render the list as well calculate cumulative team hours from this list. Moreover, the parent component also provides the details of the selected employee to the child component.

The child component receives the selected employee details as its input and allows editing the regular as well overtime hours. Once the team lead is satisfied, a save action is initiated. The save action emits an event from the child component back to the parent component. Parent component acts on this event and does necessary updates to hours of the selected employee. This update triggers recalculation of cumulative hours.

Component Architecture of Existing Application

Please go through the code in the editor as well, and pay special attention to code inside files parent-component.ts and child-component.ts. In the next section you will transform both of these components to use the new feature Angular Signals.

How to Transform the Application to Use Angular Signals

The transformation of the code can begin with parent component code. Change the managerName variable to use signals. This highlights how a new signal variable can be created. A signal can be initiated with the signal keyword and option type definition along with initial value for the signal. Code below showcases how a new signal called managerName which has a type of string can be initiated with the initial value of John Doe.

// parent-component.ts
managerName = signal<string>('John Doe');

You would observe rendering issues once you update managerName in the component file to use the signal. This is because, to read a signal value, it needs to be executed. Update the component HTML code to below to read the value of the signal properly.

<!-- parent-component.html -->
<h1 class="text-3xl font-bold mb-6">Hello {{managerName()}}!</h1>

List of employees inside parent component is a simple array, transform it to signal as well.

// parent-component.ts
 employees = signal<Employee[]>([
    {
      id: 1,
      name: 'Jon Snow',
      regularHours: 40,
      overtimeHours: 5
    },
    ...restOfEmployees
    }
  ])

As soon as the employee array is transformed to a signal, the parent component will observe several errors. For the moment, comment out the code inside getTeamRegularHoursTotal, getTeamOvertimeHoursTotal and employeeChange methods as highlighted in the illustration given below.

  // parent-component.ts
  getTeamRegularHoursTotal() {
    let total = 0;
    // this.employees.forEach(employee => total += employee.regularHours);
    return total;
  }

  getTeamOvertimeHoursTotal() {
    let total = 0;
    // this.employees.forEach(employee => total += employee.overtimeHours);
    return total;
  }

  employeeChange(updatedEmployee: Employee | null) {
    // if (updatedEmployee) {
    //   const index = this.employees.findIndex(emp => emp.id === updatedEmployee.id);
    //   if (index !== -1) {
    //     this.employees[index] = updatedEmployee;
    //   }
    // }
    // this.selectedEmployee = null;
  }

To render the application again, update the parent component template HTML and execute employee signal as per the code given below.

<!-- parent-component.html -->
<div class="flex items-center py-4 space-x-4 group border-b cursor-pointer hover:bg-gray-50" *ngFor="let employee of employees()" (click)="selectEmployee(employee)">

It's time to transform logic to calculate the value of regular hours which are showing as zero currently. This leads to examination of another important type of signal known as "computed".

Computed signals, as the name implies, rely on other signals for their value. Their value updates as soon as underlying signals change, without the need of any additional code to handle the change.

Create a computed signal teamRegularHoursTotal as shown in the code below, which depends on the employees signal directly. Thus, whenever an employees signal changes, the value of teamRegularHoursTotal gets updated automatically.

Define the computed signal as shown in the code below, and ensure the computed dependency is imported from Angular's core package. Also, remove or comment out method getTeamRegularHoursTotal completely.

// parent-component.ts
 teamRegularHoursTotal = computed(() => {
    let total = 0;
    this.employees().forEach(employee => total += employee.regularHours);
    return total;
  })

Update the HTML template of the parent component to reflect this change and show total hours value.

<!-- parent-component.html -->
<p class="text-lg font-medium text-gray-700">Regular Hours: <span class="font-bold">
{{teamRegularHoursTotal() }}</span></p>

Similarly, overtime hours can be transformed to a computed signal as well. Refer to the code below to update both the component code and its HTML template. Also, comment out or remove the getTeamOvertimeHoursTotal method completely.

// parent-component.ts
 teamOvertimeHoursTotal = computed(() => {
    let total = 0;
    this.employees().forEach(employee => total += employee.overtimeHours);
    return total;
  })

<!-- parent-component.html -->
<p class="text-lg font-medium text-gray-700">Overtime Hours: <span class="font-bold">
{{teamOvertimeHoursTotal() }}</span></p>

It is time to convert the selectedEmployee variable in the parent component to a signal. Transform it using the code below:

// parent-component.ts
selectedEmployee = signal<Employee | null>(null);

As soon as this change is made, the selectEmployee method in the parent component will have errors. These errors are a great opening to an important topic: changing values of a signal. Angular signals can be updated using the set or update API from signals.

As the name implies, the set method assigns a new value to a signal, and the update method updates the value of a signal. Use the set method to change the selectedEmployee signal value. You'll be seeing update method in the action soon.

// parent-component.ts
selectEmployee(employee: Employee): void {
    this.selectedEmployee.set(employee);
}

Along with this change, the parent component’s template needs to be updated. Update the code containing the child component as shown in the code below.

After this change, verify that the application is rendering properly and you are able to select an employee and see the details on the screen. This is important as because we'll be taking this signal transformation journey to the child component.

<!-- parent-component.html -->
<section class="w-full md:w-1/2 bg-white p-6 rounded-lg shadow-lg border border-gray-200 order-1 md:order-2 mb-4 md:mb-0"
      *ngIf="selectedEmployee() !== null">
    <app-child-component [employee]="selectedEmployee()" (employeeChange)="employeeChange($event)"></app-child-component>
</section>

The child component receives the value of the selected employee through its input, which is currently defined using the @Input decorator. This can be transformed using a signal conveniently known as input. Change the employee variable to be of type input as shown in the code below. Comment out the code shown in saveChanges and resetForm method as highlighted.

// child-component.ts
employee  = input<Employee | null>();
saveChanges() {
    // this.employee.regularHours = this.editedRegularHours;
    // this.employee.overtimeHours = this.editedOvertimeHours;
    // this.employeeChange.emit(this.employee);
}

private resetForm() {
    // this.editedRegularHours = this.employee.regularHours;
    // this.editedOvertimeHours = this.employee.overtimeHours;
}

The form inside the child component displays selected employee’s regular hours and overtime hours using two model variables: editedRegularHours and editedOvertimeHours.

These variables are no longer necessary and the inputs inside the form of the child components can be updated to use the signal’s value directly.

<!-- child-component.html --> 
<input 
     type="number" 
     id="regularHours" 
     [ngModel]="editedRegularHours"
     (ngModelChange)="onRegularHoursChange($event)"
      class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
 />
 <input 
      type="number" 
      id="overtimeHours" 
      [ngModel]="editedOvertimeHours"
      (ngModelChange)="onOvertimeHoursChange($event)"
      class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" 
  />

The logic to capture updated values for regular and overtime hours can be transformed as well. Ideally, updating the code below should work but you will get an error as highlighted below.

Component Error

The reason behind the error is that the input type signal can not be mutated with set and update methods. Angular provides a different kind of signal known as model to have input to components which can be mutated within the component itself. Change the employee to type model as seen below.

// child-component.ts
employee = model<Employee | null>();

Update the overtime update method as shown in the code below. With this, the child component regains the ability to update regular and overtime hours values of the received employee from the parent component.

// child-component.ts
  onOvertimeHoursChange(event: number) {
    this.employee.set({
      ...this.employee(),
      overtimeHours: event
    })
  }

Currently, the child component is communicating back the changes to the parent component using the @Output decorator. Similar to the input and the model, Angular has a signal of type output to enable two way communication between child and parent components. Update employeeChange event to output type as seen below.

// child-component.ts 
employeeChange = output<Employee | null>();

Update the saveChanges method and emit an updated employee object.

// child-component.ts 
 saveChanges() {
    this.employeeChange.emit(this.employee());
 }

For the final step in the child component update the resetForm and cancelChanges methods to reflect the changes made as shown in the code below.

// child-component.ts   
cancelChanges() {
    this.employeeChange.emit(null);
 }
resetForm() {
    this.employee.set(null);
}

Moving back to the parent component now, it is important to make changes to the template to ensure smooth communication between both components.

The employee input in the child component has changed to a model type input. A model has two ways of data binding. Make updates to the code as seen below to use banana in the box (special syntax [( )], which is a shorthand for two-way data binding) notation for the input.

<!-- parent-component.html -->
<section class="w-full md:w-1/2 bg-white p-6 rounded-lg shadow-lg border border-gray-200 order-1 md:order-2 mb-4 md:mb-0"
    *ngIf="selectedEmployee() !== null">
    <app-child-component [(employee)]="selectedEmployee" (employeeChange)="employeeChange($event)"></app-child-component>
</section>

It’s time to update the employeeChange method in the parent component so that updated hour values of the selected employee can be reflected back to the screen.

To achieve this, another key method used for mutating values can be leveraged. This is the update method, which takes in a function as argument instead of full value. The function passes the current value of the signal as the first parameter and returns the updated value of the signal.

Refer to the updated code for the employeeChange method as seen below to understand this better.

// parent-component.ts  
employeeChange() {
    if (this.selectedEmployee()) {
      this.employees.update(employees => employees.map(employee => {
        if (employee.id === this.selectedEmployee().id) {
          employee.regularHours = this.selectedEmployee().regularHours;
          employee.overtimeHours = this.selectedEmployee().overtimeHours;
        }
        return employee;
      }))
    }
    this.selectedEmployee.set(null);
  }

With this change the entire transformation of the app to use signals is complete. Ensure all loads properly and all the functionality are working as expected as well.

Conclusion

Congratulations on completing this tutorial. During this journey, you have created regular a signal and updated its value using set and update methods.

You also learned how computed signals are defined and utilized. Additionally you have enabled communication between two components using input, model and output signals.

If you encounter any issues during this transformation journey, you can check the code in the feature/signals branch of the same repo you had cloned earlier. It is recommended that you follow along instead of copying the solution from this feature branch.

Once you feel confident about the signal types discussed above, continue your learnings by exploring RxJS Interop from the Angular team to manage your signal integration with RxJS observables.

]]> <![CDATA[ AngularJS Interview Questions ]]> https://www.freecodecamp.org/news/angular-js-interview-questions/ 66c344b652e2abc555bfcc09 Sat, 11 Jan 2020 20:49:00 +0000 Here’s a list of the concepts that are frequently asked about in AngularJS interviews.

  • What is AngularJS?
  • What is the Model View Controller (MVC)?
  • Two way data binding
  • What is dependency injection and how does it work?
  • What is $scope in AngularJS?
  • What is $rootScope in AngularJS?
  • How to implement routing in Angular?
  • Explain directives
  • How can we create a custom directive in Angular?
  • Explain difference bewteen service and factory
  • Explain $q service, deferred and promises

Example Questions and Answers

Question: List out the Directives in AngularJS?

Answer: ngBind, ngModel, ngClass, ngApp, ngInit, ngRepeat

Question: What is $scope in AngularJS?

Answer: $scope in AngularJS is an object which refers to an application model. It is an object that binds view (DOM element) with the controller. In controller, model data is accessed via $scope object. As we know, AngularJS supports the MV pattern, $scope object becomes the model of MV.

Question: What is a SPA (Single page application) in AngularJS?

Answer: Single-Page Applications (SPAs) are web applications that load a single HTML page and dynamically update that page as the user interacts with the app.

SPAs use AJAX and HTML to create fluid and responsive web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript.

A single HTML page here means UI response page from the server. The source can be ASP, ASP.NET, ASP.NET MVC, JSP and so on.

A single-page web application, however, is delivered as one page to the browser and typically does not require the page to be reloaded as the user navigates to various parts of the application. This results in faster navigation, more efficient network transfers, and better overall performance for the end user.

Question: What is routing in AngularJS?

Answer: Routing is a core feature in AngularJS. This feature is useful in building SPAs (Single Page Applications) with multiple views. In SPAs, all views are different HTML files and we use Routing to load different parts of the application. It’s helpful to divide the application logically and make it manageable. In other words, Routing helps us to divide our application into logical views and bind them with different controllers.

Question: Explain ng-repeat directive.

Answer: The ng-repeat directive is the most used AngularJS Directive feature. It iterates over a collection of items and creates DOM elements. It constantly monitors the source of data to re-render a template in response to change.

Question: What is the difference between ng-If and ng-show/ng-hide.

Answer: The ng-If directive only renders DOM element if the condition is true. Whereas ng-show/ng-hide directive renders the DOM element but changes the class of ng-hide/ng-show to maintain visibility of the element on the page.

Question: How do you cancel a timeout with AngularJs?

Answer: $timeout is AngularJs’ wrapper for window.setTimeout, you cancel a timeout applying the function:

$timeout.cancel(function (){
  // write your code.
});

Question: What is Dependency Injection?

Answer: Dependency Injection (DI) is a software design pattern that deals with how components get ahold of their dependencies.

The AngularJS injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested.

Question : Explain the ng-App directive.

Answer: The ng-app directive starts an AngularJS Application. It defines the root element. It automatically initializes or bootstraps the application when web page containing the AngularJS Application is loaded. It is also used to load various AngularJS modules in AngularJS Applications.

Question: Explain the ng-init directive

Answer: The ng-init directive initializes an AngularJS Application's data. It is used to put values to the variables to be used in the application.

For example, in the below code we have initialized an array of countries using JSON syntax to define the array of countries.

<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
   ...
</div>

Question: How do you share data between controllers?

Answer: Create an AngularJS service that will hold the data and inject it inside of the controllers. Using a service is the cleanest, fastest and easiest way to test.

However, there are couple of other ways to implement data sharing between controllers, like:

  • Using events
  • Using $parent, nextSibling, controllerAs, and so on to directly access the controllers
  • Using the $rootScope to add the data on (not a good practice)

Question: What is the difference between the ng-if and ng-show/hide directives?

Answer: ng-if will only create and display the DOM element when its condition is true. If the condition is false or changes to false it will not create or destroy the created one.

ng-show/hide will always generate the DOM element but it will apply the CSS display property based on the evaluation of the condition.

More info on AngularJS:

]]> <![CDATA[ Angular Views, Routing, and NgModules Explained ]]> https://www.freecodecamp.org/news/angular-vs-angularjs/ 66c344c4ccd54aa295e92ca8 Mon, 06 Jan 2020 21:22:00 +0000 Angular vs AngularJS

AngularJS (versions 1.x) is a JavaScript-based open source framework. It is cross platform and is used to develop Single Page Web Application (SPWA).

AngularJS implements the MVC pattern to separate the logic, presentation, and data components. It also uses dependency injection to make use of server-side services in client side applications.

Angular (versions 2.x and up) is a Typescript-based open source framework used to develop front-end web applications. Angular has the following features like generics, static-typing, dynamic loading, and also some ES6 features.

Version History

Google released the initial version of AngularJS on October 20,2010. The first stable release of AngularJS was on December 18, 2017 of version 1.6.8.

The Angular 2.0 release took place on September 22 2014 at the ng-Europe conference.

After some modifications, Angular 4.0 was released in December 2016. Angular 4 is backward compatible with Angular 2.0. The HttpClient library is one of the new features of Angular 4.0.

Angular 5 release was on November 1, 2017. Support for progressive web apps (PWAs) was one of the improvements to Angular 4.0.

And finally, Angular 6 was released in May 2018. The latest stable version is 6.1.9

How to install it

We can add Angular either by referencing the sources available or downloading the framework.

AngularJS: We can add AngularJS (Angular 1.x versions) by referencing the Content Delivery Network from Google.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

Download/install: We can download the framework with npm, Bower, or composer

AngularJS 1.x:

npm

npm install angular

Then add a <script> to your index.html:

<script src="/node_modules/angular/angular.js"></script>

bower

bower install angular

Then add a <script> to your index.html:

<script src="/bower_components/angular/angular.js"></script>

Angular:

For more information regarding the documentation, refer to the official site of AngularJS.

You can install Angular 2.x and other versions by following the steps from the official documentation of Angular.

Now let's learn a bit more about Angular, shall we?

Introduction

Views offer a necessary layer of abstraction. They keep Angular independent of platform specific utilities. As a cross-platform technology, Angular uses its views to connect with the platform.

For every element in Angular’s template HTML, there is a corresponding view. Angular recommends interacting with the platforms through these views. While direct manipulation is still possible, Angular warns against it. Angular offers its own application programming interface (API) to replace the native manipulations.

Shunning views for platform-specific API has its consequences. When developing Angular in a web browser, elements exist in two places: the DOM and the view. Messing only with the DOM does not impact the view.

Since Angular does not interface with the platform, this creates a discontinuity. Views should mirror the platform one-to-one. Otherwise Angular wastes resources managing elements that mismatch it. This is terrible in the event of deleted elements.

These sorts of discrepancies make views appear unnecessary. Never forget that Angular is a universal development platform above all. Views are a necessary abstraction for this end.

By adhering to views, Angular applications will function across all supported development platforms. Platforms include the Web, Android, and Apple iOS.

Note

From here-on, this article assumes a web browser environment. Feel free to mentally replace the DOM with something more applicable to your preferred platform.

What are Views?

Views are almost like their own virtual DOM. Each view contains a reference to a corresponding section of the DOM. Inside a view are nodes that mirror what is in the this section. Angular assigns one view node per DOM element. Each node holds a reference to a matching element.

When Angular checks for changes, it checks the views. Angular avoids the DOM under the hood. The views reference the DOM on its behalf. Other mechanisms are in place to ensure that view changes render to the DOM. Conversely, changes to the DOM do not affect the views.

Again, views are common across all development platforms besides the DOM. Even if developing for one platform, views are still considered best practice. They guarantee Angular has a correct interpretation of the DOM.

Views may not exist on third-party libraries. Direct DOM manipulation is an escape hatch for this kind of scenario. Granted, do not expect the application to function cross-platform.

Types of Views

There are two main types of views: embedded and host.

There also exists view containers. They hold embedded and host views and are often referred to as simple “views”.

Every @Component class registers a view container (view) with Angular. New components generate a custom selector targeting a certain DOM element. The view attaches to that element wherever it appears. Angular now knows the component exists looking at the view model.

Host views attach to components created dynamically with factories. Factories provide a blueprint for view instantiation. That way the application can instantiate the component’s host view during runtime. A host view attaches to a component’s wrapper per its instantiation. This view stores data describing conventional component capabilities.

<ng-template></ng-template> is a akin to the HTML5 <template></template> element. Angular’s ng-template works with embedded views. These views do not attach to DOM elements unlike host views. They are identical to host views in that they both types exist inside of view containers.

Keep in mind, ng-template is not a DOM element. It gets commented out later leaving nothing but the embedded view nodes behind.

The difference depends on input data; embedded views store no component data. They store a series of elements as nodes comprising its template. The template makes up all the innerHTML of ng-template. Each element within the embedded view is its own separate view node.

Host Views and Containers

Host views host dynamic components. View containers (views) attach automatically to elements already in the template. Views can attach to any element beyond what is unique to component classes.

Think of the traditional method of component generation. It begins by creating a class, decorating it with @Component, and filling in metadata. This approach occurs for any pre-defined component element of the template.

Try using the Angular command-line interface (CLI) command: ng generate component [name-of-component]. It yields the following.

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

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

  ngOnInit() { }
}

This creates the component with the selector app-example. This attaches a view container to <app-example></app-example> in the template. If this were the root of the application, its view would encapsulate all other views. The root view marks the beginning of the application from Angular’s perspective.

Creating components dynamically and registering them in the Angular view model takes a few extra steps. Structural directives help manage dynamic content (*ngIf, *ngFor, and *ngSwitch…). Directives do not scale to bigger applications however. Too many structural directives complicates the template.

This is where instantiating components from existing class logic comes in handy. These components need to create a host view that can insert into the view model. Host views holds data for components so that Angular recognizes their structural purpose.

Host Views Continued

Every component has a class definition. Yet JavaScript does not support classes. Classes are syntactic sugar. They produce functions containing component factories instead.

Factories act as blueprints for host views. They build views to interface with Angular on behalf of their components. Host views attach to DOM elements. Technically any element is OK but the most common target is <ng-component></ng-component>.

A view container (view) for holding views must first exist. <ng-container></ng-container> is a great place to attach a view container. View containers are the same type of views that also apply to template class elements.

A few helpers and references from @angular/core provide the other needed utilities. The following example puts it all together.

// another.component.ts

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

@Component({
  template: `
  <h1>Another Component Content</h1>
  <h3>Dynamically Generated!</h3>
  `
})
export class AnotherComponent { }

// example.component.ts

import { AfterViewInit, Component, ViewChild,
ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { AnotherComponent } from './another.component';

@Component({
  selector: 'app-example',
  template: `
  <h1>Application Content</h1>
  <ng-container #container></ng-container>
  <h3>End of Application</h3>
  `,
  entryComponents: [ AnotherComponent ]
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild("container", { read: ViewContainerRef }) ctr: ViewContainerRef;

  constructor(private resolve: ComponentFactoryResolver) { }

  ngAfterViewInit() {
    const factory = this.resolve.resolveComponentFactory(AnotherComponent);
    this.ctr.createComponent(factory);
  }
}

Assume AnotherComponent and ExampleComponent are both declared under the same module. AnotherComponent is a simple class component dynamically added into ExampleComponent’s view. ExampleComponent’s entryComponents metadata must contain AnotherComponent for bootstrapping.

While ExampleComponent is a part of the template, AnotherComponent remains detached. It dynamically renders into the template from ExampleComponent.

There are two view containers present: <app-example></app-example> and <ng-container></ng-container>. The host view for this example will insert into ng-container.

The AfterViewInit lifecycle hook fires after the @ViewChild queries complete. Using the template reference variable #container, the @ViewChild references ng-container as ctr.

ViewContainerRef is the type of reference for view containers (views). ViewContainerRef references a view that supports the insertion of other views. ViewContainerRef contains more methods for managing its contained views.

Through dependency injection, the constructor instantiates an instance of Angular’s ComponentFactoryResolver service. This service extracts the the factory function (host view blueprint) of AnotherComponent.

The single argument of createComponent requires a factory. The createComponent function derives from ViewContainerRef. It instantiates AnotherComponent under a host view derived from the component’s factory.

The host view then inserts into the view container. <ng-component></ng-component> wraps the component inside of the view container. It has attached to it the aforementioned host view. ng-component is the host view’s connection with the DOM.

There are other ways create a host view dynamically from a component. Other ways often focus on optimization.

The ViewContainerRef holds a powerful API. It can manage any number of views either host or embedded within its view. The API includes view operations such as insert, move, and delete. This lets you manipulate the DOM through Angular’s view model. This is best practice so that Angular and the DOM match each other.

Embedded Views

Note: embedded views attach to other views no added input. Host views attach to a DOM element with input data from its host view describing it as a component.

Structural directives create an ng-template surrounding a chunk of HTML content. The directive’s host element has a view container attached. This make it so that the content can conditionally render into its intended layout.

The ng-template holds embedded view nodes representing each element within its innerHTML. ng-template is by no means a DOM element. It comments itself out. The tags define the extend of its embedded view.

Embedded Views Continued

Instantiating an embedded view requires no external resources beyond its own reference. The @ViewChild query can fetch that.

With the template reference, calling createEmbeddedView from it does the trick. The innerHTML of the reference becomes its own embedded view instance.

In the next example, <ng-container></ng-container> is a view container. ng-container gets commented out during compilation just like ng-template. Thus it provides an outlet for inserting the embedded view while keeping the DOM lean.

The embedded view template inserts at the layout location of ng-container. This newly inserted view has no additional view encapsulation besides the view container. Remember how that differs from host views (host views attach to their ng-component element wrapper).

import { Component, AfterViewInit, ViewChild,
ViewContainerRef, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
  <h1>Application Content</h1>
  <ng-container #container></ng-container> <!-- embed view here -->
  <h3>End of Application</h3>

  <ng-template #template>
    <h1>Template Content</h1>
    <h3>Dynamically Generated!</h3>
  </ng-template>
  `
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild("template", { read: TemplateRef }) tpl: TemplateRef<any>;
  @ViewChild("container", { read: ViewContainerRef }) ctr: ViewContainerRef;

  constructor() { }

  ngAfterViewInit() {
    const view =  this.tpl.createEmbeddedView(null);
    this.ctr.insert(view);
  }
}

@ViewChild queries for the template reference variable #template. This provides a template reference of type TemplateRef. TemplateRef holds the createEmbeddedView function. It instantiates the template as an embedded view.

The single argument of createEmbeddedView is for context. If you wanted to pass in additional metadata, you could do it here as an object. The fields should match up with the ng-template attributes (let-[context-field-key-name]=“value”). Passing null indicates no extra metadata is necessary.

A second @ViewChild query provides a reference to ng-container as a ViewContainerRef. Embedded views only attach to other views, never the DOM. The ViewContainerRef references the view that takes in the embedded view.

An embedded view may also insert into the component view of <app-example></app-example>. This approach positions the view at the very end of ExampleComponent’s view. In this example however, we want the content to show up in the very middle where ng-container sits.

The ViewContainerRef insert function inserts the embedded view into the ng-container. The view content shows ups in the intended location right in the middle of ExampleComponent’s view.

Conclusion

Manipulating the DOM with platform specific methods is not recommended. Creating and managing a tight set of views keeps Angular and the DOM on the same page. Updating the views informs Angular of the current state of the DOM. Updates to the views also carry over into what the DOM displays.

Angular provides a flexible API for view interaction. Developing platform independent applications is possible thanks to this level of abstraction. Of course, the temptation to fallback on platform dependent strategies persists. Unless you have a very good reason not to, try to stick with the views API Angular provides. This will yield predictable results across all platforms.

Routing in Angular

Routing is essential. Many modern web applications host too much information for one page. Users should not have to scroll through an entire application’s worth of content either. An application needs to split itself into distinguishable sections.

Users prioritize necessary information. Routing helps them find the application section with such information. Any other information useful to other users may exist on an entirely separate route. With routing, both users can find what they need quickly. Irrelevant details stay obscured behind irrelevant routes.

Routing excels at sorting and restricting access to application data. Sensitive data should never display to unauthorized users. Between every route the application may intervene. It can examine a user’s session for authentication purposes. This examination determines what the route renders if it should render at all. Routing gives developers the perfect chance to verify a user before proceeding.

Creating a list of routes promotes organization as well. In terms of development, it keeps the developer thinking in distinguishable sections. Users benefit from this too, but more-so developers when navigating the application code. A list of programmatic routers paints an accurate model of the application’s front end.

As for Angular, routing takes up its own entire library within the framework. All modern front-end frameworks support routing, and Angular is no different. Routing happens from the client-side using either hash or location routing. Both styles allow the client to manage its own routes. No additional assistance from the server is necessary past the initial request.

The web browser rarely refreshes using client-side routing. Web browser utilities such as bookmarks, history, and the address bar still work despite no refreshing. This makes for a slick routing experience that does not mess up the browser. No more jumpy page reloads while routing to a different page.

Angular adds on a layer of abstraction over the core technologies used for routing. This article intends to explain this abstraction. There exists two routing strategies in Angular: path location and hash. This article focuses on the path location strategy since its the default option.

Plus, path location may deprecate hash routing following the full release of Angular Universal. Regardless, the two strategies are very similar in implementation. Learning one learns the other. Time to get started!

RouterModule Setup

Routing utilities export with RouterModule available from @angular/router. It is not part of the core library since not all applications require routing. The most conventional way to introduce routing is as its own feature module.

As route complexity grows, having it as its own module will promote the root module’s simplicity. Keeping it stupid simple without compromising functionality constitutes good design for modules.

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

import { AComponent } from '../../components/a/a.component';
import { BComponent } from '../../components/b/b.component';

// an array of soon-to-be routes!
const routes: Routes = [];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

.forRoot(...) is a class function available from the RouterModule class. The function accepts an array of Route objects as Routes. .forRoot(...) configures routes for eager-loading while its alternative .forChild(...) configures for lazy-loading.

Eager-loading meaning the routes load their content into the application from the get-go. Lazy-loading happens on-demand. The focus of this article is eager-loading. It is the default approach for loading in an application. The RouterModule class definition looks something like the next block of code.

@NgModule({
  // … lots of metadata ...
})
export class RouterModule {
  forRoot(routes: Routes) {
    // … configuration for eagerly loaded routes …
  }

  forChild(routes: Routes) {
    // … configuration for lazily loaded routes …
  }
}

Do not worry about the configuration details the example omits with comments. Having a general understanding will do for now.

Notice how AppRoutingModule imports the RouterModule while also exporting it. This makes sense given AppRoutingModule is a feature module. It imports into the root module as a feature module. It exposes RouterModule directives, interfaces, and services to the root component tree.

This explains why AppRoutingModule must export RouterModule. It does so for the sake of the root module’s underlying component tree. It needs access to those routing utilities!

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

import { AppComponent } from './app.component';
import { AComponent } from './components/a/a.component';
import { BComponent } from './components/b/b.component';
import { AppRoutingModule } from './modules/app-routing/app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    AComponent,
    BComponent
  ],
  imports: [
    AppRoutingModule, // routing feature module
    BrowserModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

The AppRoutingModule token imports from the very top. Its token inserts into the root module’s imports array. The root component tree may now utilize the RouterModule library. That includes its directives, interfaces, and services as already mentioned. Big thanks goes to AppRoutingModule for exporting RouterModule!

The RouterModule utilities will come in handy for the root’s components. The basic HTML for AppComponent makes use of one directive: router-outlet.

<!-- app.component.html -->

<ul>
  <!-- routerLink(s) here -->
</ul>
<router-outlet></router-outlet>
<!-- routed content appends here (AFTER THE ELEMENT, NOT IN IT!) -->

routerLink is an attribute directive of RouterModule. It will attach to each element of <ul></ul> once the routes are setup. router-outlet is a component directive with interesting behavior. It acts more as a marker for displaying routed content. Routed content results from navigation to a specific route. Usually that means a single component as configured in AppRoutingModule

The routed content renders right after <router-outlet></router-outlet>. Nothing renders inside of it. This does not make too much of a considerable difference. That said, do not expect router-outlet to behave like a container for routed content. It is merely a marker for appending routed content to the Document Object Model (DOM).

Basic Routing

The previous section establishes the basic setup for routing. Before actual routing can happen, a few more things must be addressed

The first question to address is what routes will this application consume? Well, there are two components: AComponent and BComponent. Each one should have its own route. They can render from AppComponent’s router-outlet depending on the current route location.

The route location (or path) defines what appends to a website’s origin (e.g. http://localhost:4200) through a series of slashes (/).

// … same imports from before …

const routes: Routes = [
  {
    path: 'A',
    component: AComponent
  },
  {
    path: 'B',
    component: BComponent
  }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

http://localhost:4200/A renders AComponent from AppComponent’s router-outlet. http://localhost:4200/B renders BComponent. You need a way to route to these locations without using the address bar though. An application should not rely upon a web browser’s address bar for navigation.

The global CSS (Cascading Style-sheets) supplements the HTML below it. An application’s router link ought to have a pleasant appearance. This CSS applies to all other examples too.

/* global styles.css */

ul li {
  cursor: pointer;
  display: inline-block;
  padding: 20px;
  margin: 5px;
  background-color: whitesmoke;
  border-radius: 5px;
  border: 1px solid black;
}

ul li:hover {
  background-color: lightgrey;
}

<!-- app.component.html -->

<ul>
  <li routerLink="/A">Go to A!</li>
  <li routerLink="/B">Go to B!</li>
</ul>
<router-outlet></router-outlet>

This is basic routing! Clicking either of the routerLink elments routes the web address. It reassigns it without refreshing the web browser. Angular’s Router maps the routed address to the Routes configured in AppRoutingModule. It matches the address to the path property of a single Route object within the array. First match always wins, so match-all routes should lie at the very end of the Routes array.

Match-all routes prevent the application from crashing if it cannot match the current route. This can happen from the address bar where the user may type in any route. For this, Angular provides a wildcard path value ** that accepts all routes. This route usually renders a PageNotFoundComponent component displaying “Error 404: Page not found”.

// … PageNotFoundComponent imported along with everything else …

const routes: Routes = [
  {
    path: 'A',
    component: AComponent
  },
  {
    path: 'B',
    component: BComponent
  },
  {
    path: '',
    redirectTo: 'A',
    pathMatch: 'full'
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];

The Route object containing redirectTo keeps the PageNotFoundComponent from rendering as a result of http://localhost:4200. This is the applications home route. To fix this, redirectTo reroutes the home route to http://localhost:4200/A. http://localhost:4200/A indirectly becomes the application’s new home route.

The pathMatch: 'full' tells the Route object to match against the home route (http://localhost:4200). It matches the empty path.

These two new Route objects go at the end of the array since first match wins. The last array element (path: '**') always matches, so it goes last.

There is one last thing worth addressing before moving on. How does the user know where he or she is in the application relative to the current route? Sure there may be content specific to the route, but how is user supposed to make that connection? There should be some form of highlighting applied to the routerLinks. That way, the user will know which route is active for the given web page.

This is an easy fix. When you click a routerLink element, Angular’s Router assigns focus to it. This focus can trigger certain styles which provide useful feedback to the user. The routerLinkActive directive can track this focus for the developer.

<!-- app.component.html -->

<ul>
  <li routerLink="/A" routerLinkActive="active">Go to A!</li>
  <li routerLink="/B" routerLinkActive="active">Go to B!</li>
</ul>
<router-outlet></router-outlet>

The right assignment of routerLinkActive represents a string of classes. This example portrays only one class (.active), but any number of space-delimited classes may apply. When the Router assigns focus to a routerLink, the space-delimited classes apply to the host element. When the focus shifts away, the classes get removed automatically.

/* global styles.css */

.active {
  background-color: lightgrey !important;
}

Users can now easily recognize how the current route and the page content coincide. lightgrey highlighting applies to the routerLink matching the current route. !important ensures the highlighting overrides inline stylings.

Parameterized Routes

Routes do not have to be completely hard-coded. They can contain dynamic variables referenceable from the component corresponding the Route object. These variables are declared as parameters when writing the route’s path.

Route parameters are either optional or mandatory for matching a particular Route. It depends on how a route writes its parameters. Two strategies exist: matrix and traditional parameterization.

Traditional parameterization begins from the Routes array configured in AppRoutingModule.

const routes: Routes = [
  // … other routes …
  {
    path: 'B',
    component: BComponent
  },
  {
    path: 'B/:parameter',
    component: BComponent
  },
  // … other routes …
];

Focus on the two BComponent routes. Parameterization will eventually occur in both routes.

Traditional parameterization occurs in the second BComponent Route. B/:parameter contains the parameter parameter as indicated with the :. Whatever follows the colon marks the parameter’s name. The parameter parameter is necessary for the second BComponent Route to match.

parameter reads in the value of whatever gets passed into the route. Routing to http://localhost:4200/B/randomValue will assign parameter the value of randomValue. This value can include anything besides another /. For example, http://localhost:4200/B/randomValue/blahBlah will not trigger the second BComponent Route. The PageNotFoundComponent renders instead.

BComponent can reference route parameters from its component class. Both approaches to parameterization (matrix and traditional) yield the same results in BComponent. Before seeing BComponent, examine the matrix form of parameterization below.

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private router: Router) { }

  routeMatrixParam(value: string) {
    if (value)
      this.router.navigate(['B', { parameter: value }]); // matrix parameter
    else
      this.router.navigate(['B']);
  }

  routeAddressParam(value: string) {
    this.router.navigate(['B', value]);
  }
}

Angular’s dependency injection system provides an instantiation of the Router. This lets the component programmatically route. The .navigate(...) function accepts an array of values that resolves to a routable path. Something like .navigate(['path', 'to', 'something']) resolves to http://localhost:4200/path/to/something. .navigate(...) adds path-delimiting / marks when normalizing the array into a routable path.

The second form of parameterization occurs in routeMatrixParam(...). See this line of code: this.router.navigate(['B', { parameter: value }]). This form of parameter is a matrix parameter. Its value is optional for the first BComponent Route to match (/B). The Route matches regardless of the parameter’s presence in the path.

The routeAddressParam(...) resolves a route that matches the http://localhost:4200/B/randomValue parameterization approach. This traditional strategy needs a parameter to match the second BComponent route (B/:parameter).

The matrix strategy concerns routeMatrixParam(...). With or without a matrix parameter in its path, the first BComponent route still matches. The parameter parameter passes to BComponent just like with the traditional approach.

To make full sense of the above code, here is the corresponding template HTML.

// app.component.html

<ul>
  <li routerLink="/A">Go to A!</li>
  <li>
    <input #matrixInput>
    <button (click)="routeMatrixParam(matrixInput.value)">Matrix!</button>
  </li>
  <li>
    <input #paramInput>
    <button (click)="routeAddressParam(paramInput.value)">Param!</button>
  </li>
</ul>
<router-outlet></router-outlet>

In the template, values are accepted as text input. The input injects it into the route path as a parameter. Two separate sets of boxes exist for each parameterization strategy (traditional and matrix). With all the pieces coming together, it is time to examine the BComponent component class.

// b.component.ts

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

@Component({
  selector: 'app-b',
  template: `
  <p>Route param: {{ currParam }}</p>
  `
})
export class BComponent implements OnInit {
  currParam: string = "";

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe((param: ParamMap) => {
      this.currParam = param['parameter'];
    });
  }
}

BComponent results from either of two BComponent routes in AppRoutingModule. ActivatedRoute instantiates into a set of useful information pertaining to the current route. That is, the route that caused BComponent to render. ActivatedRoute instantiates via dependency injection targeting the class constructor.

The .params field of ActivatedRoute.params returns an Observable which emits the route parameters. Notice how the two different parameterization approaches result in the parameter parameter. The returned Observable emits it as a key-value pair inside of a ParamMap object.

Between the two parameterization approaches, the parameter parameter resolved identically. The value emits from ActivatedRoute.params despite the approach to parameterization.

The address bar distinguishes the final results of each approach. Matrix parameterization (optional for Route match) yields the address: http://localhost:4200/B;parameter=randomValue. Traditional parameterization (required for Route match) yields: http://localhost:4200/B/randomValue.

Either way, the same BComponent results. The actual difference: a different BComponent Route matches. This entirely depends upon the parameterization strategy. The matrix approach ensures parameters are optional for Route matching. The traditional approach requires them.

Nested Routes

Routes may form a hierarchy. In the DOM, this involves one parent router-outlet rendering at least one child router-outlet. In the address bar, it looks like this: http://localhost/parentRoutes/childRoutes. In the Routes configuration, the children: [] property denotes a Route object as having nested (child) routes.

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

import { NestComponent } from '../../components/nest/nest.component';
import { AComponent } from '../../components/nest/a/a.component';
import { BComponent } from '../../components/nest/b/b.component';

const routes: Routes = [
  {
    path: 'nest',
    component: NestComponent,
    children: [
      { path: 'A', component: AComponent },
      { path: 'B', component: BComponent }
    ]
  }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

// nest.component.ts

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

@Component({
  selector: 'app-nest',
  template: `
  <ul>
    <li routerLink="./A">Go to A!</li>
    <li routerLink="./B">Go to B!</li>
  </ul>
  <router-outlet></router-outlet>
  `
})
export class NestComponent { }

NestComponent renders a router-outlet after rendering itself from another root-level router-outlet in AppComponent. The router-outlet of NestComponent’s template may render either AComponent (/nest/A) or BComponent (/nest/B).

The AppRoutingModule reflects this nesting in NestComponent’s Route object. The children: [] field holds an array of Route objects. These Route object may also nest routes in their children: [] fields. This can continue for however many layers of nested routes. The above example shows two layers of nesting.

Each routerLink contains a ./ as compared to /. The . ensures that the routerLink appends to the route path. The routerLink completely replaces the path otherwise. After routing to /nest, . expands into /nest.

This is useful for routing to either /nest/A or /nest/B from the .nest route. A and B constitute nested routes of /nest. Routing to /A or /B returns PageNotFound. /nest must prepend the two routes.

Take a look at the AppComponent containing the root-level router-outlet in its template. AppComponent is the first layer of nesting while NestComponent is the second.

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

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li routerLink="/nest">Go to nested routes!</li>
    <li routerLink="/">Back out of the nested routes!</li>
  </ul>
  <router-outlet></router-outlet>
  `
})
export class AppComponent { }

Inside the nest Route object, the children: [] contains two more nested routes. They result in AComponent and BComponent when routing from /nest as previously discussed. These components are very simple for the sake of demonstration. <li routerLink="/">...</li> lets you navigate out of the nest routes to reset the example by navigating to the home route.

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

@Component({
  selector: 'app-a',
  template: `
  <p>a works!</p>
  `
})
export class AComponent { }

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

@Component({
  selector: 'app-b',
  template: `
  <p>b works!</p>
  `
})
export class BComponent { }

The children: [] array accepts Route object as elements. children: [] can apply to any of these elements as well. The children of these elements can continue nesting. This pattern may continue for however many layers of nesting. Insert a router-outlet into the template for every layer of nested routing.

Routing techniques apply regardless of a Route object’s level of nesting. The parameterization techniques differ in only one aspect. Child routes can only access their parent’s parameters via ActivatedRoute.parent.params. ActivatedRoute.params targets the same level of nested routes. This excludes parent-level routes and their parameters.

Route guards are especially suited for nested routing. One Route object can restrict access to all its nested (child) routes.

Guarded Routes

Web applications often consist of public and private data. Both types of data tend to have their own pages with guarded routes. These routes allow/restrict access depending on the user’s privileges. Unauthorized users may interact with a guarded route. The route should block the user if he or she attempts to access its routed content.

Angular provides a bundle of authentication guards that can attach to any route. These methods trigger automatically depending on how the user interacts with the guarded route.

  • canActivate(...) - fires when the user attempts to access a route
  • canActivateChild(...) - fires when the user attempts to access a route’s nested (child) routes
  • canDeactivate(...) - fires when the user attempts to leave a route

Angular’s guard methods are available from @angular/router. To help them authenticate, they may optionally receive a few parameters. Such parameters do not inject via dependency injection. Under the hood, each value gets passed in as an argument to the invoked guard method.

  • ActivatedRouteSnapshot - available to all three
  • RouterStateSnapshot - available to all three
  • Component - available to canDeactivate(...)

ActivatedRouteSnapshot provides access to the route parameters of the guarded route. RouterStateSnapshot exposes the URL (uniform resource locator) web address matching the route. Component references the component rendered by the route.

To guard a route, a class implementing the guard methods needs to first exist as a service. The service can inject into AppRoutingModule to guard its Routes. The token value for the service may inject into any one Route object.

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

import { AuthService } from '../../services/auth.service';
import { UserService } from '../../services/user.service';

import { PrivateNestComponent } from '../../components/private-nest/private-nest.component';
import { PrivateAComponent } from '../../components/private-nest/private-a/private-a.component';
import { PrivateBComponent } from '../../components/private-nest/private-b/private-b.component';

const routes: Routes = [
  {
    path: 'private-nest',
    component: PrivateNestComponent,
    canActivate: [ AuthService ], // !!!
    canActivateChild: [ AuthService ], // !!!
    canDeactivate: [ AuthService ], // !!!
    children: [
      { path: 'private-A', component: PrivateAComponent },
      { path: 'private-B', component: PrivateBComponent }
    ]
  }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ],
  providers: [
    AuthService,
    UserService
  ]
})
export class AppRoutingModule { }

canActivate, canActivateChild, and canDeactivate implement from AuthService. The service implementation will be shown shortly alongside the UserService implementation.

UserService provides the information needed to authenticate a user. The AuthService guard method implementations perform the authentication. AppRoutingModule must include the two services into its providers array. This is so the module’s injector knows how to instantiate them.

Nested routes exist off of the /private-nest path. The Route object for /private-nest contains a few more new fields. Their names should look familiar as they mirror their corresponding guard methods.

Each field fires its namesake’s method implementation inside of the service when triggered. Any number of services can populate this array too. The method implementation of each service gets tested. They must return a boolean value or an Observable that emits a boolean value.

See the AuthService and UserService implementations below.

// user.service.ts

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

class TheUser {
  constructor(public isLoggedIn: boolean = false) { }

  toggleLogin() {
    this.isLoggedIn = true;
  }

  toggleLogout() {
    this.isLoggedIn = false;
  }
}

const globalUser = new TheUser();

@Injectable({
  providedIn: 'root'
})
export class UserService {
  theUser: TheUser = globalUser;

  constructor(private router: Router) { }

  get isLoggedIn() {
    return this.theUser.isLoggedIn;
  }

  login() {
    this.theUser.toggleLogin();
  }

  logout() {
    this.theUser.toggleLogout();
    this.router.navigate(['/']);
  }
}

The same instance of TheUser gets passed with each instantiation of UserService. TheUser provides access to isLoggedIn determining the user’s login status. Two other public methods let the UserService toggle the value of isLoggedIn. This is so the user can log in and out.

You can think of TheUser as a global instance. UserService is a instantiable interface that configures this global. Changes to TheUser from one UserService instantiation apply to every other UserService instance. UserService implements into AuthService to provide access to isLoggedIn of TheUser for authentication.

import { Component, Injectable } from '@angular/core';
import { CanActivate, CanActivateChild, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

import { UserService } from './user.service';

@Injectable({
  providedIn: 'root'
})
export class AuthService implements CanActivate, CanActivateChild, CanDeactivate<Component> {
  constructor(private user: UserService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.user.isLoggedIn)
      return true;
    else
      return false;
  }

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.canActivate(route, state);
  }

  canDeactivate(component: Component, route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (!this.user.isLoggedIn || window.confirm('Leave the nest?'))
      return true;
    else
      return false;
  }
}

AuthService implements every guard method imported from @angular/router. Each guard method maps to a corresponding field in the PrivateNestComponent’s Route object. An instance of UserService instantiates from the AuthService constructor. AuthService determines if a user may proceed using isLoggedIn exposed by UserService.

Returning false from a guard instructs the route to block the user from routing. A return value of true lets the user proceed to his route destination. If more than one service authenticates, they all must return true to permit access. canActivateChild guards the child routes of PrivateNestComponent. This guard method accounts for users bypassing PrivateNestComponent through the address bar.

Guard method parameters pass in automatically upon invocation. While the example does not make use of them, they do supply useful information from the route. The developer can use this information to help authenticate the user.

AppComponent also instantiates UserService for direct use in its template. The UserService instantiation of AppComponent and AuthService reference the same user class (TheUser).

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

import { UserService } from './services/user.service';

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li routerLink="/private-nest">Enter the secret nest!</li>
    <li routerLink="/">Leave the secret nest!</li>
    <li *ngIf="user.isLoggedIn"><button (click)="user.logout()">LOGOUT</button></li>
    <li *ngIf="!user.isLoggedIn"><button (click)="user.login()">LOGIN</button></li>
  </ul>
  <router-outlet></router-outlet>
  `
})
export class AppComponent {
  constructor(private user: UserService) { }
}

UserService handles all the logic for AppComponent. AppComponent mostly concerns its template. A UserService does instantiate as user from the class constructor. user data determines the template’s functionality.

Conclusions

Routing strikes a fine balance between organizing and restricting sections of the application. A smaller application such as a blog or tribute page may not require any routing. Even then, including a little bit of hash routing could not hurt. A user may only want to reference part of the page after all.

Angular applies its own routing library built on top of the HTML5 history API. This API omits hash routing to instead use the pushState(...) and replaceState(...) methods. They change the web address URL without refreshing the page. The default path location routing strategy in Angular works this way. Setting RouterModule.forRoot(routes, { useHash: true }) enables hash routing if preferred.

This article focused on the default path location strategy. Regardless of the strategy, many routing utilities are available to route an application. The RouterModule exposes these utilities through its exports. Basic, parameterized, nested, and guarded routes are all possible utilizing RouterModule.

NgModules

Angular applications begin from the root NgModule. Angular manages an application’s dependencies through its module system comprised of NgModules. Alongside plain JavaScript modules, NgModules ensure code modularity and encapsulation.

Modules also provide a top-most level of organizing code. Each NgModule sections off its own chunk of code as the root. This module provides top-to-bottom encapsulation for its code. The entire block of code can then export to any other module. In this sense, NgModules act like gatekeepers to their own code blocks.

Angular’s documented utilities come from NgModules authored by Angular. No utility is available unless the NgModule that declares it gets included into the root. These utilities must also export from their host module so that importers can use them. This form of encapsulation empowers the developer to produce his or her own NgModules within the same file-system.

Plus, it makes sense to know why the Angular CLI (command-line interface) imports BrowserModule from @angular/core. This happens whenever a new app generates using the CLI command: ng new [name-of-app].

Understanding the point of the implementation may suffice in most cases. However, understanding how the implementation wires itself to the root is even better. It all happens automatically by importing BrowserModule into the root.

NgModule Decorator

Angular defines its modules by decorating a generic class. The @NgModule decorator indicates the class’ modular purpose to Angular. An NgModule class consolidates root dependencies accessible/instantiable from the module’s scope. ‘Scope’ meaning anything originating from the module’s metadata.

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

@NgModule({
  // … metadata …
})
export class AppModule { }

NgModule Metadata

The CLI generated root NgModule includes the following metadata fields. These fields provide configuration to the code block upon which the NgModule presides.

  • declarations: []
  • imports: []
  • providers: []
  • bootstrap: []

Declarations

The declarations array includes all components, directives, or pipes hosted by an NgModule. They are private to the module unless explicitly exported inside its metadata. Given this use-case, components, directives, and pipes are nicknamed ‘declarables’. An NgModule must declare a declarable uniquely. The declarable cannot declare twice in separate NgModules. An error gets thrown otherwise. See the below example.

import { NgModule } from '@angular/core';
import { TwoComponent } from './components/two.component.ts';

@NgModule({
  declarations: [ TwoComponent ]
})
export class TwoModule { }

@NgModule({
  imports: [ TwoModule ],
  declarations: [ TwoComponent ]
})
export class OneModule { }

Angular throws an error for the sake of NgModule encapsulation. Declarables are private to the NgModule that declares them by default. If multiple NgModules need a certain declarable, they should import the declaring NgModule. This NgModule must then export the desired declarable so that the other NgModules can use it.

import { NgModule } from '@angular/core';
import { TwoComponent } from './components/two.component.ts';

@NgModule({
  declarations: [ TwoComponent ],
  exports: [ TwoComponent ]
})
export class TwoModule { }

@NgModule({
  imports: [ TwoModule ] // this module can now use TwoComponent
})
export class OneModule { }

The above example will not throw an error. TwoComponent has been uniquely declared between the two NgModules. OneModule also has access to TwoComponent since it imports TwoModule. TwoModule in turn exports the TwoComponent for external use.

Imports

The imports array only accepts NgModules. This array does not accept declarables, services, or anything else besides other NgModules. Importing a module provides access to what declarable the module publicizes.

This explains why importing BrowserModule provides access to its various utilities. Each declarable utility declared in BrowserModule exports from its metadata. Upon importing BrowserModule, those exported declarables become available to the importing NgModule. Services do not export at all since they lack the same encapsulation.

Providers

The lack of service encapsulation might seem odd given the encapsulation of declarables. Remember that services go into the providers array separate from declarations or exports.

When Angular compiles, it flattens the root NgModule and its imports into one module. Services group together in a single providers array hosted by the merged NgModule. Declarables maintain their encapsulation through a set of compile-time flags.

If NgModule providers contain matching token values, the importing root module takes precedence. Past that, the last NgModule imported takes precedence. See the next example. Pay special attention to the NgModule importing the other two. Recognize how that affects the precedence of the provided service.

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

@NgModule({
  providers: [ AwesomeService ], // 1st precedence + importing module
  imports: [
    BModule,
    CModule
  ]
})
export class AModule { }

@NgModule({
  providers: [ AwesomeService ]  // 3rd precedence + first import
})
export class BModule { }

@NgModule({
  providers: [ AwesomeService ]  // 2nd precedence + last import
})
export class CModule { }

Instantiating AwesomeService from within AModule’s scope results in an AwesomeService instance as provided in AModule’s metadata. If AModule’s providers omitted this service, the AwesomeService of CModule would take precedence. So and so forth for BModule if CModule’s providers omitted AwesomeService.

Bootstrap

The bootstrap array accepts components. For each component of the Array, Angular inserts the component as its own root of the index.html file. The CLI-generated root NgModule of an application will always have this field.

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

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

AppComponent’s element will inject into the base-level HTML of the app (index.html). The rest of the component tree unfolds from there. The scope of the overarching NgModule covers this entire tree plus any others injected from the bootstrap array. The array usually contains only one element. This one component represents the module as a single element and its underlying tree.

NgModules vs JavaScript Modules

You have seen Angular and JavaScript modules working together in the previous examples. The top-most import..from statements constitute the JavaScript module system. The file locations of each statement’s target must export a class, variable, or function matching the request. import { TARGET } from './path/to/exported/target'.

In JavaScript, modules are file-separated. Files import using the import..from keywords as just mentioned. NgModules, on the other hand, are class-separated and decorated with @NgModule. And so, many Angular modules can exist in a single file. This cannot happen with JavaScript since a file defines a module.

Granted, conventions say that each @NgModule decorated class should have its own file. Even so, know that files do not constitute their own modules in Angular. Classes decorated with @NgModule create that distinction.

JavaScript modules provide token references to @NgModule metadata. This happens at the top of a file hosting a NgModule class. NgModule uses these tokens inside of its metadata fields (declarables, imports, providers, etc). The only reason @NgModule can decorate a class in the first place is because JavaScript imports it from the top of the file.

// JavaScript module system provides tokens
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppService } from './app.service';
// Javascript module system is strict about where it imports. It can only import at the top of files.

// Angular NgModule uses those tokens in its metadata settings
@NgModule({ // import { NgModule } from '@angular/core';
  declarations: [
    AppComponent // import { AppComponent } from './app.component';
  ],
  imports: [
    BrowserModule // import { BrowserModule } from '@angular/platform-browser';
  ],
  providers: [
    AppService // import { AppService } from './app.service';
  ],
  bootstrap: [
    AppComponent // import { AppComponent } from './app.component';
  ]
})
export class AppModule { }
// JavaScript module system exports the class. Other modules can now import AppModule.

The above example does not introduce anything new. The focus here is on the comments explaining how the two modular systems work together. JavaScript provides token references while NgModule uses those token to encapsulate and configure its underlying block of code.

Feature Modules

Applications grow overtime. Scaling them properly requires application organization. A solid system for this will make further development much easier.

In Angular, schematics ensure purpose-driven sections of code remain distinguishable. Beyond the sub-NgModule schematics, there are the NgModules themselves. They are a type of schematic too. They stand above the rest in the list of schematics excluding the application itself.

The root module should not stand alone once an application starts to scale. Feature modules include any NgModule used alongside the root NgModule. You can think of the root module as having the bootstrap: [] metadata field. Feature application ensure the root module does not oversaturate its metadata.

Feature modules isolate a section of code on behalf of any importing module. They can handle whole application sections independently. This means it could be used in any application whose root module imports the feature module. This tactic saves developers time and effort over the course of multiple applications! It keeps the application’s root NgModule lean as well.

In the root NgModule of an app, adding a feature module’s token into the root’s imports array does the trick. Whatever the feature module exports or provides becomes available to the root.

// ./awesome.module.ts

import { NgModule } from '@angular/core';
import { AwesomePipe } from './awesome/pipes/awesome.pipe';
import { AwesomeComponent } from './awesome/components/awesome.component';
import { AwesomeDirective } from './awesome/directives/awesome.directive';

@NgModule({
  exports: [
    AwesomePipe,
    AwesomeComponent,
    AwesomeDirective
  ]
  declarations: [
    AwesomePipe,
    AwesomeComponent,
    AwesomeDirective
  ]
})
export class AwesomeModule { }

// ./app.module.ts

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

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

// ./app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
  <!-- AwesomeDirective -->
  <h1 appAwesome>This element mutates as per the directive logic of appAwesome.</h1>

  <!-- AwesomePipe -->
  <p>Generic output: {{ componentData | awesome }}</p>

  <section>
    <!-- AwesomeComponent -->
    <app-awesome></app-awesome>
  </section>
  `
})
export class AppComponent {
  componentData: string = "Lots of transformable data!";
}

<app-awesome></app-awesome> (component), awesome (pipe), and appAwesome (directive) are exclusive to AwesomeModule. Had it not exported these declarables or AppModule neglected to add AwesomeModule to its imports, then AwesomeModule’s declarables would not have been usable by AppComponent’s template. AwesomeModule is a feature module to the root NgModule AppModule.

Angular provides some its own modules that supplement the root upon their importation. This is due to these feature modules exporting what they create.

Static module methods

Sometimes modules provide the option to be configured with a custom config object. This is achieved by leveraging static methods inside the module class.

An example of this approach is the RoutingModule which provides a .forRoot(...) method directly on the module.

To define your own static module method you add it to the module class using the static keyword. The return type has to be ModuleWithProviders.

// configureable.module.ts

import { AwesomeModule } from './awesome.module';
import { ConfigureableService, CUSTOM_CONFIG_TOKEN, Config } from './configurable.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


@NgModule({
  imports: [
    AwesomeModule,
    BrowserModule
  ],
  providers: [
    ConfigureableService
  ]
})
export class ConfigureableModule { 
  static forRoot(config: Config): ModuleWithProviders {
    return {
        ngModule: ConfigureableModule,
        providers: [
            ConfigureableService,
            {
                provide: CUSTOM_CONFIG_TOKEN,
                useValue: config
            }
        ]
    };
  }
}

// configureable.service.ts

import { Inject, Injectable, InjectionToken } from '@angular/core';

export const CUSTOM_CONFIG_TOKEN: InjectionToken<string> = new InjectionToken('customConfig');

export interface Config {
  url: string
}

@Injectable()
export class ConfigureableService {
  constructor(
    @Inject(CUSTOM_CONFIG_TOKEN) private config: Config
  )
}

Notice that the object the forRoot(...) method returns is almost identical to the NgModule config.

The forRoot(...) method accepts a custom config object that the user can provide when importing the module.

imports: [
  ...
  ConfigureableModule.forRoot({ url: 'http://localhost' }),
  ...
]

The config is then provided using a custom InjectionToken called CUSTOM_CONFIG_TOKEN and injected in the ConfigureableService. The ConfigureableModule should be imported only once using the forRoot(...) method. This provides the CUSTOM_CONFIG_TOKEN with the custom config. All other modules should import the ConfigureableModule without the forRoot(...) method.

NgModule Examples from Angular

Angular provides a variety of modules importable from @angular. Two of the most commonly imported modules are CommonModule and HttpClientModule.

CommonModule is actually a subset of BrowserModule. Both provide access to the *ngIf and *ngFor structural directives. BrowserModule includes a platform-specific installation for the web browser. CommonModule omits this installation. The BrowserModule should import into the root NgModule of a web application. CommonModule provides *ngIf and *ngFor to feature modules not requiring a platform installation.

HttpClientModule provides the HttpClient service. Remember that services go in the providers array of the @NgModule metadata. They are not declarable. During compilation, every NgModule gets consolidated into one single module. Services are not encapsulated unlike declarables. They are all instantiable through the root injector located alongside the merged NgModule.

Back to the point. Like any other service, HttpClient instantiates into a class through its constructor via dependency injection (DI). Using DI, the root injector injects an instance of HttpClient into the constructor. This service lets developers make HTTP requests with the service’s implementation.

The HttpClient implementation includes into the HttpClientModule providers array. As long as the root NgModule imports HttpClientModule, HttpClient will instantiate from inside the root’s scope as expected.

Conclusion

Chances are you may have already taken advantage of Angular’s NgModules. Angular makes it very easy to throw a module into the root NgModule’s imports array. Utilities are often exported from the imported module’s metadata. Hence why its utilities suddenly become available upon importation within the root NgModule.

NgModules work closely with plain JavaScript modules. One provides token while one uses them for configuration. Their teamwork results in a robust, modular system unique to the Angular framework. It provides a new layer of organization above all other schematics excluding the application.

Hopefully this article furthers your understanding of NgModules. Angular can leverage this system even further for some of the more exotic use-cases.

]]> <![CDATA[ The Best Angular and AngularJS Tutorials ]]> https://www.freecodecamp.org/news/best-angular-tutorial-angularjs/ 66c3457942d4db64acf4cbe6 Sat, 23 Nov 2019 00:49:00 +0000 AngularJS (versions 1.x) is a JavaScript-based open source Framework. It is cross platform and used to develop Single Page Web Applications (SPWAs). AngularJS implements the MVC pattern to separate the logic, presentation, and data components. It also uses dependency injection to make use of server-side services in client side applications.

Angular (versions 2.x and up) is a Typescript-based open source framework to develop front-end Web applications. Angular has features like generics, static-typing and also some ES6 features.

We recommend learning Angular and using it for new projects. AngularJS is mainly used for legacy projects.

The best way to learn Angular is with freeCodeCamp's 6-hour Angular Tutorial on YouTube.

Image

Other tutorials on Angular

Angular 1.x

General Pages

Videos

Courses

Angular 2.x+

General Pages

Specific-topic Pages

  • Directives - Excellent guide going into detail on Angular Directives (Part 1)

Courses

Blogs

Version History

Google released the initial version of AngularJS on October 20, 2010. The first stable release of AngularJS was on December 18, 2017 of version 1.6.8. Angular 2.0 release took place on September 22, 2014 at the ng-Europe conference. One of the features of Angular 2.0 is dynamic loading.

After some modifications, Angular 4.0 was released in December, 2016. Angular 4 is backward compatible with Angular 2.0. HttpClient library is one of the features of Angular 4.0. Angular 5 was released on November 1, 2017. Support for progressive web apps was one of the improvements in Angular 4.0. Angular 6 was released in May 2018. The latest stable version is 6.1.9

Install:

We can add Angular either by referencing the sources available or downloading the framework.

Link To Source:

AngularJS: We can add AngularJS (Angular 1.x versions) by referencing the Content Delivery Network from Google.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

Download/install: We can download the framework with npm, Bower or composer.

Angular 1.x:

npm

npm install angular

Then add a <script> to your index.html:

<script src="/node_modules/angular/angular.js"></script>

bower

bower install angular

Then add a <script> to your index.html:

<script src="/bower_components/angular/angular.js"></script>

For more information regarding the documentation, refer to the official site of AngularJS.

You can install Angular 2.x and other versions by following the steps from the official documentation of Angular.

Components

Motivation

Angular contains many schematics for building applications. Components are one such schematic. They encompass a single unit of logic concerned with a single part of the application. Components often partner with other schematics to operate more effectively.

Among all schematics, components tend to consume more than they provide. While other schematics like directives, pipes, and services offer utility, components utilize. They are responsible for the application interface so it makes sense why they consume utility.

Components simplify the application. Funneling logic into a single section of the visible interface is their primary goal. To build applications step-by-step, you must build component-by-component. Components act as Angular’s building blocks, after all.

Components Introduction

As mentioned, components consume utility (services/resources). They stand between business logic and presentation to produce a cohesive unit. Angular attaches various mechanisms to each component. These attachments identify a class as a component and define its standard capabilities.

Angular must recognize components when it comes across them. To do this, @Component must decorate every class intended to be a component. Decorators indicate to Angular what the class is.

In the case of a component, it must know how to interact with its injector, connect with a template, pull from a list of styles, encapsulate its styles, and so on. Angular takes care of most of the low-level requirements. Developers still need to configure a component’s behavior, import its dependencies, and extend its logic.

For all such things, we have the component’s class. The class keeps everything relatively uniform. It encapsulates the component’s business logic.

Component Class and Metadata

Go ahead and install the Angular command-line interface (CLI). You can learn more about it from this article. The CLI command ng generate component [name-of-component] yields the following.

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

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

  ngOnInit() { }
}

This is the basic skeleton from which all great components originate. The @Component decorator is the most important part. Without it, the above example becomes a generic class. Angular relies on decorators to discern a class’s schematic type.

@Component receives metadata as a single object. Decorators are just JavaScript functions under the hood. They take in arguments as with the metadata object. The metadata object configures a component’s basic dependencies. Each fields plays a role.

  • selector: tells Angular to associate the component with a certain element in the application’s template HTML.
  • templateUrl: accepts the file location of the component’s template HTML (this is where data gets displayed to).
  • styleUrls: accepts an array of style-sheet file locations (strings). These style-sheets target the component’s assigned template.

Think of metadata as a big blob of configuration. The decorator takes it so that it can generate the data specific to the component. The decorator decorates the underlying class with data necessary for its class’s behavior. A component class that is.

The class’s signature exports by default so that the component can be imported. ngOnInit also gets implemented. implements tells the class to define certain methods per the interface’s definition. ngOnInit is a lifecycle hook.

Component Lifecycle and Change Detection

Components use all sorts of tools, services, and features. One key feature available to components is lifecycle hooks. An explanation for each hook exists in this article.

There are eight in total and they all serve as timing functions. They execute conditionally as the component transitions from state-to-state via change detection. This process happens constantly across the component tree. It searches for changes in data which merit a re-rendering of the template.

Time to move on. Please refer to the aforementioned articles for more information on the component lifecycle. It deserves much more explanation.

Component Data

Data drives everything. Components are no exception. Components encapsulate all their data. To receive data externally, a component must explicitly declare it. This form of privacy keeps information from clashing across the component tree.

Data determines what gets displayed from the component class to its template. Any updates to the class’s data will (or at least should) update the template display.

Components will often initialize a set of members (or variables) that store data. They are used throughout the component class logic for convenience. This information fuels the logic resulting in the template and its behavior. See the following example.

// ./components/example/example.component.ts

import { Component, OnInit } from '@angular/core';
import { Post, DATA } from '../../data/posts.data';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {
  username: string;
  totalPosts: number;
  allPosts: Post[];

  deletePost(index: number): void {
    this.allPosts.splice(index, 1);
    this.totalPosts = this.allPosts.length;
  }

  ngOnInit(): void {
    this.username = DATA.author;
    this.totalPosts = DATA.thePosts.length;
    this.allPosts = DATA.thePosts;
  }
}

<!-- ./components/example/example.component.html -->

<h1>{{ username }}</h1>
<span>Change Name: </span><input [(ngModel)]="username">
<h3>Posts: {{ totalPosts }}</h3>
<ul>
<hr/>
<div *ngFor="let post of allPosts; let i=index">
  <button (click)="deletePost(i)">DELETE</button>
  <h6>{{ post.title }}</h6>
  <p>{{ post.body }}</p>
  <hr/>
</div>
</ul>

Note the ways the component interacts with its data. It first fetches it from ../../data/posts.data before it begins to forward it to the template for display.

The data shows up throughout the template. Inside the double curly braces, a variable’s value is mapped from the component class into the braces. The *ngFor loops across the allPosts class array. Clicking on the button removes a specific element from allPosts by its index. You can even change the topmost username by typing into the input box.

The above interactions alter the component class’s data which in turn updates the component’s template HTML. Components provide the backbone logic that facilitates the flow of data. The template HTML makes that data readable to the user.

Component Template

The previous example’s template HTML featured an interesting syntax. The syntax was not actual HTML. It was Angular’s template HTML. Some often refer to it as HTML Plus, recognizable only by Angular’s compiler. The compiler supports a syntax resulting in the dynamic manipulation of HTML. This article will often refer to it as ‘template HTML’ or ‘template’.

The syntax lets components inject data directly into the template HTML. The injection is dynamic. This means that data can iterate and display itself as HTML without needing external assistance. The Angular compiler compiles it into real HTML by the time it reaches the web browser.

To learn more about some of the ways data binds to the template, read about data binding in Angular. A few examples of data binding occurred in the previous example ({{ ... }}). For this article, it is enough to recognize data interactions were happening between the component class and its template.

Querying the Template

Data managing the state of the template imperatively works OK. Yet, pure data does not always fulfill an application’s intended design. Interacting more directly with the Document Object Model (DOM) may be required.

To do that, the component must have reference to the template elements. When the data changes, the component can manipulate the DOM explicitly. This is a more declarative approach.

Components can grab references using a web browser’s DOM application programming interface (API). Bad idea though. Angular prefers cross-platform compatibility. For a component to function outside of the web browser, it needs to use Angular’s API instead of the DOM’s.

Components can query their templates using the @ViewChild and ContentChild decorators. They grab references to template elements on behalf of the component class.

import { Component, ViewChild, ContentChild, ElementRef, Renderer2, AfterContentChecked, AfterViewChecked } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
  <button (click)="toggleEnlarge()">Toggle Enlarge</button>
  <ng-content></ng-content>
  `
})
export class ChildComponent implements AfterContentChecked {
  @ContentChild("pReference", { read: ElementRef }) pElement: ElementRef;
  textEnlarge: boolean = false;

  constructor(private renderer: Renderer2) { }

  toggleEnlarge() {
    this.textEnlarge = !this.textEnlarge;
  }

  ngAfterContentChecked() {
    if (this.textEnlarge)
      this.renderer.setStyle(this.pElement.nativeElement, 'font-size', '25px');
      else
      this.renderer.setStyle(this.pElement.nativeElement, 'font-size', 'initial');
    }
}

@Component({
  selector: 'app-parent',
  template: `
  <button (click)="toggleHighlight()">Toggle Highlight</button>
  <h1 #hOneRefereance>View Child</h1>
  <app-child>
    <p #pReference>Content Child</p>
  </app-child>
  `
})
export class ParentComponent implements AfterViewChecked {
  @ViewChild("hOneRefereance", { read: ElementRef }) hOneElement: ElementRef;
  textHighlight: boolean = false;

  constructor(private renderer: Renderer2) { }

  toggleHighlight() {
    this.textHighlight = !this.textHighlight;
  }

  ngAfterViewChecked() {
    if (this.textHighlight)
      this.renderer.setStyle(this.hOneElement.nativeElement, 'background-color', 'yellow');
    else
      this.renderer.setStyle(this.hOneElement.nativeElement, 'background-color', 'initial');
  }
}

The above example contains two buttons that toggle a certain style for each element. Clicking the buttons toggles the true/false values unique to each component. These booleans determine if the custom styles apply. Instead of these values causing changes imperatively, the lifecycle hooks (ngAfterViewChecked and ngAfterContentChecked) declaratively alter the DOM.

The declarative approach explicitly changes the style through the element’s reference. In imperative programming, changes to the DOM based off data are implicit. Check out this article on imperative and declarative programming to learn more.

The main thing to notice is how these references get pulled from the template. In the example, there are two sections of the template queried using two decorators: @ViewChild and @ContentChild.

They differ in where they look for an element’s reference whether it be in the content DOM or view DOM. These two DOMs exist in ParentComponent’s template. Differentiating between them is important because they finish rendering at separate times.

This is why @ViewChild and @ContentChild both exist. They work together with their companion lifecycle hooks ngAfterViewChecked and ngAfterContentChecked. These lifecycle hooks wait for their respective queries to resolve before executing.

Once resolved, @ViewChild and @ContentChild provide references to two elements. Both exist in separate parts of the DOM. The boolean data still determines the outcome. How that outcome translates to the DOM is the key difference from before. The DOM updates viaRenderer2’s direct manipulation of it.

Content Projection

The content DOM exists in the innerHTML of ChildComponent’s <app-child></app-child> element. It is all positioned within ParentComponent’s template. The innerHTML of app-child projects onto ChildComponent’s template through <ng-content></ng-content>.

This exemplifies content projection. Displaying content from one component to another using the innerHTML of another’s tags in one’s template so that another component can pull that innerHTML into its own template via <ng-content></ng-content>. Thank you for reading that sentence.

Hence why ChildComponent references its <p></p> element using @ContentChild. Content contained within <app-child></app-child> in ParentComponent’s template makes up the content DOM. ChildComponent references the element with an @ContentChild query.

ParentComponent’s view DOM consists of everything accessible from within the component’s view. This does not necessarily include the entire template given the innerHTML of <app-child></app-child>. Again, this part of the DOM is queried from ChildComponent using @ContentChild. Everything else gets queried using @ViewChild from the ParentComponent class.

This is a great way for components to exchange content and query their own content regardless of their DOM type. Components can communicate with themselves and others using data binding as well. Read more about it from this article.

Component Styles

Styles are critical to a component’s readability and interactivity. Each component encapsulates its style-sheet dependencies. That way they only apply to the component’s template HTML. A special technique introduced by HTML’s shadow DOM makes this possible.

A shadow DOM branch may exist on any element. This part of the DOM cannot be seen from the HTML’s source code. Standard HTML elements leverage the shadow DOM to provide their trademark appearances. A shadow DOM branch must anchor itself to a visible component so that it can style and customize it.

The unique aspect about a shadow DOM branch is its encapsulation. Everything used to style a shadow DOM branch’s root element is private to it. No other element can access it.

Angular embraces this form of encapsulation with components. The style-sheet and template of a component encapsulate together. No other components have access to them. Style-sheet clashes cannot occur.

Angular does not use the shadow DOM by default. It uses an emulation system that mimics the behavior of the shadow DOM. This is a temporary measure since some web browsers do not yet support the shadow DOM API.

The @Component metadata contains the encapsulation field. This lets developers toggle in-between emulated shadow DOM, real shadow DOM, or neither. Here are the options in their respective order:

  • ViewEncapsulation.Emulated - fake shadow DOM (default)
  • ViewEncapsulation.Native - real shadow DOM (now deprecated since Angular 6.0.8)
  • ViewEncapsulation.None - neither

ViewEncapsulation.None means the component’s style-sheets elevate to the global scope. Not recommended considering components should form their own private unit (encapsulation). Angular still provides it as an escape hatch for extreme situations.

Conclusion

Components build applications. They are privately scoped and separately uniform of each other unless configured otherwise. Applications tend to begin from the root module. Past that, components form an elongated tree defining the rest of the application.

A component covers a designated unit of the application interface. This includes its styles, logic, and layout. Other schematics such as pipes, services, and directives see frequent use in component code. You can learn more about these interactions in some of the other Angular guide articles.

Do not forget that components must bootstrap. This can happen in the root module or the component’s metadata. This is so Angular recognizes the component wherever it appears in the application.

You can always learn more, as components carry far more depth than that what this article could convey.

]]> <![CDATA[ The Top JavaScript Frameworks For Front-End Development in 2020 ]]> https://www.freecodecamp.org/news/complete-guide-for-front-end-developers-javascript-frameworks-2019/ 66d460f03bc3ab877dae2230 Fri, 08 Nov 2019 12:45:14 +0000 By Shifa Martin

Front-end developers might know this game already: you type “top JavaScript frameworks” into Google and you get so many JavaScript frameworks from which to choose.

There are always more choices for JavaScript frameworks. And it's always tough to choose a JavaScript framework for front-end development.

So, what are front-end developers looking for in their tech stacks? As a full-time developer, I know it comes down to rapid development and easy-to-make UIs.

Rather than try to be decisive, we, 450+ developers at ValueCoders software development company, voted and shortlisted a few of the best JavaScript frameworks.

Our Vote Goes to React

I was not surprised to see this. Most of our developers voted for React as one of the best JavaScript frameworks. There have been plenty of projects along the way that our front-end developers are handling that highlighted the strengths of the JS framework. React provides a combination of the following:

  • Reusable components
  • Synchronization of state and view
  • Routing and template system

Our developers implement front-end logic by relying heavily on React. At the same time, I was surprised by how simple it was to create applications with React.

Here is an Overview of Our App

The application is simple. It’s a studio management app for music teachers that helps them focus more on their teaching and less on the management of their music studio.

The key challenge was creating one ‘Activity Dashboard’ for teachers where they could manage all their students' activities and track their progress over time. We overcame this challenge by using Redux libraries to build the platform. We built a teacher’s studio from where they could manage their students' progress, showcase new music lessons, chat with them, compare students music playing with live music, and provide them feedback.

Image

So, this is my experience with React JS. But many would argue that Vue is one of the best front-end JavaScript frameworks with many useful tools.

Front-end developers are the ones deciding which JavaScript framework will do the job. In doing so, they face a lot of challenges because they need to decide what they’ve always needed. Often, we have to choose a JavaScript framework now, not after a week of research. In that case, most developers go with what they know. But maybe the stacks you’re familiar with are no longer cutting it in terms of performance.

Even just choosing among Angular, React, an Vue, it is difficult for new developers. Rather than making it more exhaustive for you, here is the list of the top JavaScript frameworks for front-end developers.

The Big 5 JavaScript Frameworks

The five JavaScript frameworks that currently dominate the market in terms of popularity and usage are:

  • React
  • Vue
  • Angular
  • Ember
  • Backbone.js.

They each have large communities. If you are a front-end developer or are going to start your new project on front-end technologies, these five are your best bets. Here’s a look at the npm trends over the last six months.

Image

Image

1. React

React is the definite leader in the JS world. This JavaScript framework uses a reactive approach and also introduces many of its own concepts for front-end web development.

To use React , you’ll have to learn to use a plethora of additional tools to reach high flexibility in front-end development. For example, here's a less exhaustive list of libraries you can use with React: Redux, MobX, Fluxy, Fluxible, or RefluxJS. React can also be used with jQuery AJAX, fetch API, Superagent, and Axios.

Concurrent Mode

React is constantly working towards improving concurrent mode. To take this forward, React Conf 2019 wrapped up last month where the React team talked about improving Concurrent Mode and the Suspense model. Both the features make React apps more responsive by rendering trees without blocking threads. This allows React to focus on high priority tasks like responding to user input.

Suspense

React also introduced Suspense to improve the developer’s experience when handling asynchronous data fetching in React apps. In short, the new update to Suspense lets the component wait until a condition is met.

Hooks are another important update to React 16.8. React hooks lets you use every important feature of React – server-side rendering, accessibility, concurrent mode, and suspense – all without writing a class.

React applications are divided into multiple components that contain both business logic and HTML markup functions. To improve the communication between components, developers can use either Flux or a similar JavaScript library.

React also introduced objects, like state and props. With the state and props objects, you can simply pass data from a component to the layout or from a parent component to a child component.

Introduction to the React ecosystem:

  • The React library plus React router for implementing routes.
  • React-DOM for DOM manipulation.
  • React developer tools for Firefox and Chrome browsers.
  • React JSX, a markup language that mixes HTML into JavaScript.
  • React Create App command line interface to set up a React project.
  • Redux and Axios libraries to organize communication with the backend team.

No doubt, React is one of the most popular JavaScript frameworks. And, I think that React can be your first choice for creating advanced-grade apps.

2. Angular 2 to Angular 9

Angular 9 will mark a turning point revealed by the Angular team at the recent AngularConnect 2019. According to the update, the team is planning to make the Angular Ivy compiler available for all apps. The main benefit of Angular Ivy is that it is able to reduce the size of applications.

Angular today has become very advanced and modular to use for front-end development. Previously you could insert a link to the AngularJS library in the main HTML file, but now you can do the same by installing separate modules.

Angular's flexibility is commendable. That’s why Angular's 1.x versions are still in demand. However, many developers currently rely on Angular 2+ because of its MVC architecture which has changed substantially to a component based architecture.

Angular has a couple of additional challenges. You're almost obliged to use TypeScript to ensure type safety in Angular apps. TypeScript makes the Angular 2+ framework not so pleasant to work with.

Angular’s ecosystem is comprised of:

  • For quick project setup, Angular's command line interface is helpful.
  • Developers will get a set of modules for Angular projects: @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/http, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, and @angular/upgrade.
  • Angular uses Zone.js a JavaScript library to implement zones in Angular apps.
  • TypeScript and CoffeeScript both can be used with Angular.
  • For communication with server-side apps, Angular uses RxJS and the Observable pattern.
  • Angular Augury for debugging Angular apps.
  • Angular Universal for creating server-side apps with Angular.

Angular2 is a complete JavaScript framework with all the tools a modern front-end developer needs. You can choose Angular if you don’t like to work with additional libraries as with React.

3. Vue

The Snyk JavaScript framework report for 2019 is out. The report mainly focused on security risks in both React and Angular.

The concept of Vue has been taken from Angular and React, but Vue is better in many ways. I’ll talk about its features, but first check out what the Synk report says about Vue's front-end security. Vue has been downloaded 40 million times this year and records only four direct vulnerabilities. All of them have been fixed.

For any front-end developer unfamiliar with Vue, let’s clarify several points.

With Vue you store component logic and layouts along with stylesheets in one file. This is the same way React works, without stylesheets. To let components talk to each other, Vue uses the props and state objects. This approach also existed in React before Vue adopted it.

Similar to Angular, Vue wants you to mix HTML layouts with JavaScript. You have to use Vue directives such as v-bind or v-if to interpolate values from the component logic to templates.

One of the reasons why Vue is worth considering instead of React is because of the Redux library that’s often used in large-scale React applications. As explained in the React section, when a React+Redux app grows bigger, you’ll spend a lot of time applying small changes to multiple files instead of actually working on features. The Vuex library – a Flux-like state management tool designed for Vue – seems less unwieldy than Redux.

If you're choosing between Vue and Angular, the reasons to opt for Vue over Angular can be reduced to the following: Angular is an over-complicated, full-fledged framework with a restrictive nature; Vue is much simpler and less restrictive than Angular.

Another advantage of Vue over Angular and React is that you don’t have to learn JavaScript once more.

An introduction to the VueJS ecosystem:

  • Vuex comes with a dedicated library for application management.
  • Vuex is similar to the concept of Flux.
  • You will get Vue-loader for components and vue.js devtools for Chrome and Firefox browsers.
  • Vue-resource and Axios tools for communication between Vue and the backend source.
  • Vue.js support Nuxt.js for creating server-side applications with Vue; Nuxt.js is basically a competitor to Angular Universal.
  • You will get a Weex JavaScript library with Vue syntax that is used for mobile app development.

Vue is excellent in terms of its workflow to other frameworks. I might opt for Vue because it’s less complicated than React and Angular JS and a great choice for developing enterprise-level apps.

4. Ember

Ember 3.13 released this year with some new updates and features. Ember is just like Backbone and AngularJS, and is also one of the oldest JavaScript frameworks. But with the new update, Ember 3.13 is compatible with new bug fixes, performance improvements, and deprecation. Tracked property updates have also been introduced that allow simpler ways of tracking state change in the ergonomic system of Ember apps.

Ember has a relatively intricate architecture, which will allow you to quickly build huge client-side applications. It realizes a typical MVC JavaScript framework, and Ember’s architecture comprises the following parts: adapters, components, controllers, helpers, models, routes, services, templates, utils, and addons.

One of Ember’s best features is its command line interface tool. The Ember CLI helps front-end developers be highly productive and lets them complete projects on time. You can not only create new projects with ready setups, but you can also create controllers, components, and project files using automatic generation.

The EmberJS ecosystem is comprised of:

  • Ember CLI tool for quick prototyping and managing dependencies.
  • Ember server built into the framework for the development of apps.
  • You'll get Ember.js library and Ember Data for data management.
  • Handlebars template engine for Ember applications.
  • QUnit testing framework for Ember.
  • Ember Inspector development tool for Chrome and Firefox browsers.
  • Ember Observer for public storage and Ember addons to implement generic functionalities.

Although Ember is underrated, it's perfect for creating complex client-side apps.

5. Backbone.js

Backbone is a JavaScript framework based on the MVC architecture. In Backbone.js, the View of MVC helps implement component logic similarly to a Controller. Backbone view can use engines like Mustache and Underscore.js.

Backbone is an easy to use JavaScript framework that allows for quick development of single page applications. To use Backbone.js to the fullest extent, you’ll have to choose tools: Chaplin, Marionette, Thorax, Handlebars or Mustache, and so on.

If you need to design an app that has different types of users, Backbone collections (arrays) can be used here to separate the models. Backbone.Events can be used with Backbone models, collections, routes, and views.

Introducing the BackboneJS ecosystem:

  • The Backbone library consists of events, models, collections, views, and router.
  • Underscore.js, a JavaScript library with helper functions that you can use to write cross-browser JavaScript.
  • You can use template engines such as Mustache and jQuery-tmpl.
  • BackPlug online repository with a lot of ready solutions for Backbone-based apps.
  • Backbone generator CLI for building Backbone apps.
  • Marionette, Thorax, and Chaplin JavaScript libraries to develop an advanced architecture for Backbone apps.

Backbone.js is a perfect choice for front-end and back-end development as it supports REST APIs that are used to synchronize the front-end and back-end.

Need More Help?

All front-end developers out there, if you need help with JavaScript frameworks, feel free to get in touch. Or, you can also contact us to hire ReactJS developers, Vue developers, or Angular developers.

_Or, leave me a note or Tweet out to me._

Remember this article gives you a general roadmap on JavaScript frameworks. Tell me if I have missed something, and we can discuss that. I hope it will also help achieve your front-end development goals.

]]> <![CDATA[ How I Built an HR Portal on Angular 4 and Magento ]]> https://www.freecodecamp.org/news/how-i-built-an-online-hrm-management-portal-on-angular-4-magento/ 66d460f47df3a1f32ee7f899 Wed, 23 Oct 2019 09:59:14 +0000 By Shifa Martin

Sometimes trying a new technology mashup works wonders. Both Magento 2 + Angular 4 are very commonly talked about, and many consider them to be the future of the development industry.

For example, I recently used Magento + Angular 4 to build a super-efficient HR management portal.

Learning With the Best Examples

One of the most sought after features of an hr portal is “managing diverse requirements promptly". This means that the human resources department need a software to manages the whole employee performance life cycle and other HR activities at a click of a button. For example, handling onboarding of employees, performance appraisals, training and development, leave management, grievance management, disciplinary processes, etc etc. then they review the final outcome.

The HR portal I built is an intuitive online management software that reported as high as 90 percent better output than other tools. However, it suffered from many challenges such as the speed of software, output quality, and promptness.

Challenges

A user typically enters numerous details in combinations and has a hop between step 1 and step 2. Every time the user hops between different tabs, the entire details of the employee get reloaded. This is annoying and the chance of user abandonment is high.

The prototype of such an independent HR portal worked great. However, developing it was a complex task. Our developers had to make AngularJS and Magento (PHP) work together as a last resort.

My firm ValueCoders software development company which is a world leader in IT and software solutions has its own development team that worked at their wits’ end on this HR portal.

Why Magento With Angular 4 for HR Portal?

Before coming to us, our client had already received offers from different development agencies. And, as a friendly favor, my team was asked to review all those ideas for their hr portal. But, I was amazed to see that one of them had sent only one thing that they were going to build the hr portal with the typescript-based framework Angular.

And that wasn’t all. They had even tried to hide the fact that this technology wasn’t enough to build the hr portal. Instead, they promoted their brand and also proposed a price that didn't justify making an online HR portal with high-quality propositions.

The crux of the matter is why we have used Magento with AngularJS for HR portal.

Image

No doubt, Magento is one of the most popular open-source CMS systems written in PHP that justifies that each e-portal has to be unique. With its out-of-the-box features, open-source architecture, and REST API, Magento gives an unrivaled ability to customize and third-party integrations to your app that you could only dream of.

However, the rise of internet connectivity, smartphones, and tablets have directly affected the e-commerce CMS market. Today customers don’t just expect an e-portal or hr portal to be unique but also want it to work fast and seamlessly. In an attempt to bring a native feel to the website is the biggest advantage of MVC JavaScript framework like AngularJS. Some praise it as the future of the e-commerce development industry and others call it a trendy gimmick.

Having an MVC framework meant that customers can traverse through the hr portal from page to page or view by view and not like a book. This means instead of refreshing the entire web page the user navigates to an internal page and only the relevant section will be updated. The result is the blazing fast loading hr portal because the inner pages of the website never load.

Explaining the entirety of AngularJS and Magento is beyond the scope of this article, but we will look at the quick code snippets for a comprehensive guide on the HRM tutorial.

Before we move towards the more technical details, a brief introduction of what type of hr portal we’ve dealt with here seems to be in place.

Features of HR Portal

Image

The client is Australia’s leading HRIS platform that manages the whole employee lifecycle at the click of a button. They help centralize HR activities and improve the efficiency of your business with lots of awesome features.

After some discussions with the client, a few specs crystallized:

  • To develop a hr portal for managing and facilitating all functions of the Human resource department in the enterprises which deals with payroll, performance, employees management, recruitment, training etc.
  • Client-side should be strong and able to manage diverse requirements promptly.
  • Developing a hr portal that provides smart way to manage HRM and save both money and time.
  • No loss to quality of the website.

These are pretty good set of features for an hr portal. This is exactly what our client want from us with a new mashup of technology. So if you want to know the end result, here's is an overview of the coding on Angular 4 for the hr portal.

So that's I tried to do. And hit the jackpot. Now that I have covered all the contextual things, I can finally you take to more technical stuff.

Showing one of the features of the hr portal that is organizational structuring or treemapping, wherein a user can check the complete details of an employee by entering employee id, name, department or operations type. This tool give you a method for displaying hierarchical data using nested figures and in just one click of enter tab.

Let's Code With Angular 4:

Image Coding on Angular 4 For Organizational Chart/Employee Details

Image Coding on Angular 4 For Organizational Chart/Employee Details

After getting the hr portal foundation ready using Angular 4, one of the first challenges was to add features on a different development environment.

Here's another illustration with the PHP codes:

Image

Image

Image

Image

Image

Image

Image

Considering the above examples, hopefully this will save someone out there fair amount of time and efforts spend in the coding to get this type of HR portal ready for your business.

To Sum Up My Experience

This hr portal project taught me continuous integration, deployment, and monitoring of the software solution before submitting to a new release to the app stores. However, a few simple things I still considered a necessary:

  • The client company always want to automate everything that can be automated. It is possible only with the team of developers. So I was determined to hire Angular developers that have desirable experience in the industry and can make the development process as easy as possible.
  • If there is one thing you can count on the way of developing your hr portal, it's that you'll take the help of dedicated developers before you start the actual app/web development process.

Admittedly, the technology is ever changing and far from perfect. But I and many other developers would not hesitate to use them again and again. As always, if you are looking for any help on HR portal development feel free to get in touch.

And, if you're looking for experienced Angular developers, Magento developers and interested to hire them for your next hr portal project, ValueCoders software development team is there to help you!

Connect with me on Twitter for more updates on future posts/tutorials: https://twitter.com/ValueCoders

]]> <![CDATA[ Angular vs React: Which One to Choose for Your App ]]> https://www.freecodecamp.org/news/angular-vs-react-what-to-choose-for-your-app-2/ 66be14af9f6cdc38e7dec50b Tue, 08 Oct 2019 13:49:33 +0000 A precise side-by-side comparison of general and technical aspects of Angular and React

There are so many articles titled “Angular vs React”, “React vs Angular”, “Angular or React” – it is a miracle you opened this one! What these articles are missing, however, is a precise side-by-side comparison of Angular vs React.

So this is what I am going to do in this blog post: to place React and Angular in direct juxtaposition. We're going to review and contrast the two JavaScript frameworks and look at each possible characteristic to make sure we don't miss even a single piece of data.

In the end, I am not going to tell you which technology to choose. But I will give you enough food for thought for you to choose the technology that suits you and your project best.

Image

search (1)

1. Brief Overview

React

React is a JavaScript library for UI development. It is managed by Facebook and an open-source community of developers.

The framework was introduced in May 2013.

The latest updates were released on August 8th, 2019 – just over a month ago.

Angular

Angular is an open-sourced JavaScript framework for web and mobile development. It is TypeScript-based and managed by Google’s Angular Team and the Angular developer community.

Launched in September 2016, Angular (also known as Angular 2.0) is a complete rewrite of AngularJS (Angular 1.0), which was introduced in 2010.

There have been six versions of Angular already, and the latest release took place on August 28th, 2019 – almost three weeks ago.

internet (1)

2. Universality

React

React is a framework used in both web and mobile development. However, for mobile development, it needs to be incorporated with Cordova. Moreover, for mobile development, there is an additional framework – React Native.

React can be used to build both single-page and multiple-page web applications.

Angular

Angular is suitable for both web and mobile development. In mobile development, however, a great share of work is done by Ionic. Furthermore, similarly to React, Angular has an additional mobile development framework. The counterpart of React Native is NativeScript.

Angular can also be used for both single- and multiple-page web apps.

success (1)

3. Self-Sufficiency

React

React is a framework for UI development, so apps written with React need additional libraries to be used. For instance, Redux, React Router, or Helmet optimize the processes of state management, routing, and interaction with the API. Such functions as data binding, component-based routing, project generation, form validation, or dependency injection require additional modules or libraries to be installed.

Angular

Angular is a full-fledged framework for software development, which usually does not require additional libraries. All the above-mentioned functions – data binding, component-based routing, project generation, form validation, and dependency injection – can be implemented with the means of Angular package.

open-book

4. Learning Curve

React

React is minimalistic: no dependency injection, no classic templates, no overly complicated features. The framework will be quite simple to understand if you already know JavaScript well.

However, it takes quite some time to learn how to set up a project because there is no predefined project structure. You also need to learn the Redux library, which is used in more than half of React applications for state management. Constant framework updates also require additional effort from the developer. Furthermore, there are quite a lot of best practices in React, which you will need to learn to do things right.

Angular

Angular itself is a huge library, and learning all the concepts associated with it will take much more time than in the case of React. Angular is more complex to understand, there is a lot of unnecessary syntax, and component management is intricate. Some complicated features are embedded into the framework core, which means that the developer cannot avoid learning and using them. Moreover, there are a lot of ways of solving a single issue.

Although TypeScript closely resembles JavaScript, it also takes some time to learn. Since the framework is constantly updated, the developer needs to put some extra learning effort.

users (1)

5. Community

React

React framework is one of the most popular JS frameworks worldwide, and the community supporting and developing it is huge.

Working with React, you have to be a continuous learner since the framework is often updated. While the community tries to go forward with the latest documentation as swiftly as possible, keeping up with all the changes is not that easy. Sometimes, there may be a lack of documentation, but the issue is often solved by the community support on thematic forums.

React is actively used by such companies as Facebook, Twitter, Netflix, Airbnb, PayPal, The New York Times, Yahoo, Walmart, Uber, and Microsoft.

Angular

Angular is less admired than React and faces a lot of skepticism, partially because of the unpopularity of Angular 1.0. Developers used to dismiss the framework as an overly complicated one as it required a lot of time to be spent learning. However, this framework has been developed by Google, which works in favor of Angular’s credibility.

Google provides the long-term support of the framework and constantly improves it. However, the updates are so fast that the documentation often falls behind.

Angular is used by such companies as McDonald’s, AT&T, HBO, Apple, Forbes, Adobe, Nike, and Microsoft as well.

settings (1)

6. Performance

React

React’s performance is greatly improved with the introduction of the virtual DOM. Since all virtual DOM trees are lightweight and built on server, the load on browser is reduced. Furthermore, since the data-binding process is unidirectional, bindings are not assigned watchers as in the case of Angular. Respectively, no additional workload is created.

Angular

Angular performs worse, especially in the case of complex and dynamic web apps.

The performance of Angular apps is negatively affected by bidirectional data-binding. Each binding is assigned a watcher to track changes, and each loop continues until all the watchers and associated values are checked. Because of this, the more bindings you have, the more watchers are created, and the more cumbersome the process becomes.

However, the most recent update of Angular has greatly improved its performance, and it does not lose to React anymore. Moreover, the size of an Angular application is slightly smaller than the size of a React app.

menu (1)

7. Language

React

React is based on JavaScript ES6+ combined with JSX script. JSX is an extension for syntax, which makes a JavaScript code resemble that written in HTML. This makes the code easier to understand, and typos are easier to spot. For the JSX code to be compiled in a browser, React is augmented with Babel – a code translation tool.

Angular

Angular can use JavaScript or TypeScript, which is a superset of JS developed specifically for larger projects. TypeScript is more compact than JavaScript, the code is easier to navigate, and typos are easily spotted. Code refactoring process also becomes simpler and faster.

layers (2)

8. App Structure

React

The structure of React provides developers with the freedom to choose. There is no “the only right structure” for a React app. However, the necessity to design the app structure at the beginning of each project makes it more difficult and longer to start.

Besides, React offers only View layer, while Model and Controller are added with the usage of other libraries.

The architecture of a React app is component-based. The code is made of React components, which are rendered with React DOM library and directed in two ways: functional (with a function that returns JSX)...

function Hello(props){
return <div>Hello {props.name}</div>
}

...and class-based (with ES6 classes).

class Hello extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}

Angular

The structure of Angular is fixed and complex, suitable for experienced developers.

Angular is based on three layers – Model, Controller, and View. An object responsible for the Model is initialized by the Controller and displayed with the View.

The application code consists of different Angular components, each being written in four separate files: a TypeScript to implement the component, an HTML file to define the view, a CSS file to define the stylistic features, and a special file for testing purposes. Links to these files are written in the app directive, which displays the structural logic of the app. Respectively, Angular components are also reusable.

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { }

app (1)

9. UI Components

React

UI tools for React are developed by the community. There are a lot of free and paid UI components on the React portal. To use material design components in React, you would have to install an additional library – Material-UI Library & Dependencies.

Angular

Angular has a built-in Material toolset, and it offers a variety of pre-built material design components. There are various buttons, layouts, indicators, pop-ups, and form controls. Because of this, UI configuration becomes simpler and faster.

file (1)

10. Directives

React

In React, templates and logic are explained in one place – at the end of the component. It allows the reader to quickly grasp the meaning of the code even if they do not know the syntax.

Angular

In Angular, each template is returned with an attribute – a directive of how the object has to be set. The syntax of Angular directives is complex and sophisticated, which makes it incomprehensible for a reader without any experience in working with this technology.

controls (1)

11. State Management

React

In React, each component has its own state. A React developer can create special components for holding the state of the entire application or a particular part of it. The major disadvantage here consists in the fact that the global state needs to be stored in multiple different parts of the app with data being manually passed around different component tree levels.

class Clock extends React.Component {
  constructor(props) {
    super(props);
   this.state = {date: new Date()};
 }
  render() {
    return (
      <div>
        <h1>Hello world!</h1>
        <h2>Now is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

To solve this problem, there is a special state management library – Redux. The idea of it is that the global state is represented as a single stateful object, which is altered in different parts of the app with the help of reducers – special Redux functions.

Another solution is offered by the state management library MobX. Unlike Redux with the global state stored in a single immutable stateful object, MobX offers storing only the minimal required state, while the rest of it can be derived.

Angular

In Angular, component data is stored in component properties. Parent components pass data through to children ones. State changes in some parts can be identified and recalculated, but in a large app, it can cause a multi-directional tree series of updates, which will be difficult to track. The features can be improved with the help of state management libraries, such as NgRx or RxJS , which would make sure that the data flow is unidirectional.

export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;
  constructor(private service: HeroService) { }
  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }
  selectHero(hero: Hero) { this.selectedHero = hero; }
}

network (1)

12. Dependency Injection

React

React does not fully support dependency injection as it does not fully comply with the idea of functional programming and data immutability. Instead, it has a global state for all components.

Angular

The greatest advantage of Angular rests in the fact that, unlike React, it supports dependency injection. Therefore, Angular allows having different lifecycles for different stores.

import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';
@Injectable({
  // we declare that this service should be created
  // by the root application injector.
  providedIn: 'root',
})
export class HeroService {
  getHeroes() { return HEROES; }
}

unlink (1)

13. Data Binding

React

Data binding stands for the data synchronization process between Model and View. React should be augmented with Redux, which allows you to work with immutable data and makes data flow unidirectional. Unidirectional binding is predictable, which facilitates the debugging process.

Angular

Angular works with bidirectional data-binding and mutable data. While the advantages of mutable and immutable data are a matter of a heated discussion, it is definitely easier to work with bidirectional data-binding rather than with the unidirectional approach. At the same time, bidirectional data-binding negatively affects the performance since Angular automatically develops a watcher for each binding.

The ways of data-binding in Angular:

{{expression}}   Interpolation
[target]="expression"    Property
bind-target="expression"    Attribute

(target)="statement" Event
on-target="statement" Event

[(target)]="expression" Two-way
bindon-target="expression" Two-way

shuffle (1)

14. Change Rendering

React

React uses a virtual Document Object Model (DOM), which enables easily implementing minor data changes in one element without updating the structure of the entire tree. The framework creates an in-memory cache of data structure, computes the changes, and efficiently updates the DOM displayed in the browser. This way, the entire page seems to be rendered on each change, whereas actually, the libraries render changed subcomponents only.

The React team is constantly improving Fiber – a mechanism aimed at boosting the productivity of change rendering.

Angular

Angular uses a real DOM, which updates the entire tree structure even when the changes have taken place in a single element. The real DOM is considered to be slower and less effective than the virtual DOM.

To compensate for this disadvantage, Angular uses change detection to identify components that need to be altered. Therefore, the real DOM on Angular performs as effectively as the virtual DOM on React.

edit (1)

15. Tools

React

React is supported by multiple code editors. For instance, the code in React can be edited with Sublime Text, Visual Studio, and Atom. To bootstrap a project, you can use the Create React App (CLI) tool. In turn, server-side rendering is completed with the use of Next.js framework.

To test the entire app written in React, you would need multiple tools. For instance, Enzyme for component testing, Jest for testing JS code, React-unit for unit testing and so on. To debug the app in the development mode, you can use a browser extension React Dev Tools.

Another interesting tool is React 360, which is a library used for creating AR and VR applications.

Angular

Similarly to React, Angular is supported by a variety of code editing tools. For example, you may work with such code editors as Aptana, Sublime Text, and Visual Studio. A project can be promptly set up with Angular CLI. Server-side rendering is completed with the help of Angular Universal.

Unlike React, Angular can be fully tested with a single tool. For the end-to-end testing in Angular, the platforms are Jasmine, Protractor, and Karma. Another tool that debugs the app in the development mode is a browser extension Augury.

To Wrap Up

Angular is a full-fledged mobile and web development framework. React is a framework only for UI development, which can be turned into a full-fledged solution with the help of additional libraries.

React seems simpler at first sight, and it takes less time to start working on a React project. However, that simplicity as the main advantage of React is neutralized because you have to learn to work with additional JavaScript frameworks and tools.

Angular itself is more complex and takes quite some time to master. Yet, it is a powerful tool that offers a holistic web development experience, and once you learn how to work with it, you reap the fruits.

There is no better framework. Both are updated continuously to keep up with the competitor. For instance, while React was believed to win because of its virtual DOM, Angular equaled the score by implementing change detection. While Angular was considered to be winning because of being developed by such an authoritative company as Google, the immense devoted React community fully compensated for Google's reputation and made React similar to Angular.

In the end, React vs Angular is all a matter of personal preference, a matter of skills and habits. As a beginner in programming, you would probably benefit more from starting with React. As an experienced developer, you just keep working with what you know better.

Do not forget to challenge yourself and start learning a new framework, React or Angular. As a Project Manager or a business owner outsourcing developers, you should talk to your web development team and together choose the framework that suits all of you best, whether it be Angular or React.

Do you have an idea for either an Angular or React project?

My company KeenEthics is experienced in react development, and we, also, provide outstanding agularjs developers for your projects. In case you need the following services, feel free to get in touch.

If you have enjoyed the article, you should definitely read another wonderful comparison of 2 JS frameworks: React vs Svelte: How to Build Messaging Components.

P.S.

I would like to say thank you to everyone who contributed to this article including Sergey Gornostaev and Volodya Andrushchak, full-stack software developers @ KeenEthics.

The original article posted on KeenEthics blog can be found here: Angular vs React: Which One to Choose for Your App.

]]> <![CDATA[ What’s new in Angular 7.0 and how you can upgrade ]]> https://www.freecodecamp.org/news/whats-new-in-angular-7-0-and-how-to-upgrade-f2ed22a79e28/ 66d45dd155db48792eed3f2d Fri, 02 Nov 2018 15:16:46 +0000 By Ankit Sharma

Introduction

Angular has released its latest version, Angular 7.0. In this article, we will explore the following points:

  • What is new in Angular 7.0
  • Creating your first Angular 7.0 application using Angular CLI
  • How to update your existing Angular application to Angular 7.0

What’s new in Angular 7.0?

  1. While creating a new Angular application, the Angular CLI will prompt the user to select if they want to add features like Angular routing or the format of the stylesheet they want to use in their application
  2. Angular 7.0 applications will use the Bundle Budget feature of Angular CLI. This will warn developers if the application bundle size exceeds the predefined limit. The default value for the warning is set to 2MB, and for errors it is 5MB. This value is configurable and can be changed from the angular.json file. This feature enhances the application’s performance considerably.

  3. The Component Dev Kit (CDK) of Angular Material also receives some new features as part of this update. The two newly added feature of the CDK are:

  4. Virtual Scrolling If you are trying to load a large list of elements, then it can affect the application’s performance. The <cdk-virtual-scroll-viewport> tag can be used to load only the visible part of the list on the screen. It will render only the items that can fit on the screen. When a user scrolls through the list then the DOM will load and unload the elements dynamically based on the display size. This feature is not to be confused with infinite scrolling which is altogether a different strategy to load elements. You can read more about Virtual Scrolling here.

  5. Drag and Drop
    We can easily add the drag and drop feature to an item. It supports features such as free dragging of an element, reordering items of a list, moving items between list, animation, adding a custom drag handle, and restricted dragging along X or Y axis. You can read more about Drag and Drop here.

  6. The mat-form-field will now support the use of the native select element. This will provide enhanced performance and usability to the application. Read more about this feature here.

  7. Angular 7.0 has updated its dependencies to support Typescript 3.1, RxJS 6.3 and Node 10.

Now we will proceed to create our first Angular 7 application.

Prerequisites

  • Install the latest version of Node.js from here
  • Install Visual Studio Code from here

Installing Node.js will also install npm on your machine. After installing Node.js, open the command prompt. Run the following set of commands to check the version of node and npm installed on your machine.

  • node -v
  • npm -v

Refer to the image below:

Image

Installing Angular CLI

Angular CLI is the Command Line interface for Angular. It helps us to initialize, develop and maintain Angular applications easily.

To install Angular CLI, run the following command in the command window:

npm i -g @angular/cli

This will install Angular CLI 7.0 globally in your machine. Refer to the image below:

Image

To check the version of angular CLI installed in your machine, run the following command:

Refer to the image below:

Image

Create the Angular 7 app

Open Visual Studio Code and navigate to View >> Terminal. This will open the VS code terminal window. Alternatively, you can also use the keyboard shortcut ctrl+` to open the terminal window.

Type the following sequence of commands in the terminal window. These commands will create a directory named “ng7Demo”. Then create an Angular application with the name “ng7App” inside that directory.

  • mkdir ng7Demo
  • cd ng7Demo
  • ng new ng7App

As you run the ng new command, the Angular CLI will ask you to make selections in the following two options:

  1. Would you like to add Angular routing? (y/N)
  2. Which stylesheet format would you like to use?

Once you select the options and hit enter, the Angular 7.0 application will be created.

Refer to the below Gif for better understanding.

Image

Once the application is created successfully, run the following command to open the project:

  • code .

Refer to the image below:

Image

This will open the code file of our application in a new VS Code window. You can see the following file structure in Solution Explorer.

Image

Open the package.json file and you can observe that we have the latest Angular 7.0.0 packages installed in our project.

{
  "name": "ng7-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.0.0",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.1",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }
}

Execution Demo

The name of our Angular application is ng7App which is inside the ng7Demo directory.

So, we will first navigate to our application using the below commands.

  • cd ng7Demo
  • cd ng7App

Now, we use the following command to start the web server.

  • ng serve

Refer to the image below:

Image

After running this command, you can see that it is asking to open _http://localhost:4200_ in your browser. So, open any browser on your machine and navigate to this URL. Now, you can see the following page.

Image

How to upgrade to Angular 7

The angular team has provided an Angular Update Guide to ensure the smooth upgrade of angular versions. Navigate to https://update.angular.io/ to access it. It is a self-explanatory and easy to use application. It will show you the steps that you need to follow before updating, during the update and after the update. Refer to the image below:

Image

If you want to update your application from Angular 6 to Angular 7 then run the following command in the project folder:

ng update @angular/cli @angular/core

Conclusion

We have learned about the new features of Angular 7.0. We also installed Angular CLI 7.0. To create and execute an Angular 7.0 app we have used Angular CLI and VS Code. We also explored the method to upgrade an existing application to Angular 7.0.

See Also

Originally published at https://ankitsharmablogs.com/

]]> <![CDATA[ Learn Angular in this free 33-part course by Angular-expert Dan Wahlin ]]> https://www.freecodecamp.org/news/want-to-learn-angular-heres-our-free-33-part-course-by-dan-wahlin-fc2ff27ab451/ 66d85264c1231da2ef2b5aa7 Tue, 16 Oct 2018 05:34:57 +0000 By Per Harald Borgen

According to the Stack Overflow developer survey 2018, Angular is one of the most popular frameworks/libraries among professional developers. So learning it increases your chances of getting a job as a web developer significantly.

That’s why we’ve teamed up with one of the most renowned experts on the framework, and created a free Angular course at Scrimba.

Instructor Dan Wahlin is a Google Developer Expert who’s provided training, architecture, and development services for some of the biggest corporations in the industry and created some of the most popular training courses on Udemy and Pluralsight. He’s also a regular speaker at developer conferences around the world.

In this course, Dan guides you through creating your very first Angular app using TypeScript. By completing the course you’ll add valuable skills to your toolbelt.

Now let’s have a look at how the course is structured!

Part #1: Course overview

Image

In the introductory video, Dan gives an overview of the course, key aspects of Angular, and how the course is laid out. He also tells you a little bit about his background, so that you are familiar with him before jumping into the code of your new app.

Part #2: Application Overview

In this part, Dan gives us a glimpse into the app we’re going to build. It is designed to allow us to focus on the key building blocks of Angular. By creating an app to display customer data and their orders, we will hone in on the key aspects of Angular, such as Components, Modules, Services and Routing. Also, during the course, we will learn about great features every app has, like sorting and filtering.

Image

Part #3: Angular CLI

In this part we learn the basics of using the Angular CLI (command-line interface) tool and walk through the basic commands:

ng --version  
ng --help  
ng new my-app-name  
ng generate [component | directive | pipe | service | class | interface | enum | guard]  
ng build   
ng serve  
ng lint   
ng tests

For example, ng --new my-app-name will create a new blank Angular app for us and we can use ng -generate to create parts of our app.

ng build will build everything for us, and ng serve -o will even start a development server as well as open a browser window for us to view our app in.

Part #4: Project Files Overview

In this video of the course, Dan gives a basic overview of the CLI command for generating a blank Angular app and gives a quick overview of the configuration files like tslint, tsconfig and protractor in our app folder.

Part #5: The Big Picture

Here we learn a useful abstraction that Components are similar to Lego blocks — we build up components and then use them to stick together to make an app. We also get a quick refresher on JavaScript language family and learn where TypeScripts fits in.

Image

Dan gives us a good mental model to use for thinking about our code while working with Angular so we can imagine where it all fits in.

Part #6: Components & Modules — Overview

Not abstracted away, the diagram for Angular code might look like this.

Image

Components are made up of code and HTML template and it can have a selector, so we can call it in our HTML.

<appcomponent></appcomponent>

Every Component consists of:

Image

Dan then explains what each of the parts is and how they fit in the Angular way of developing components. One of the great things about Angular is that it’s very predictable. Once you learn how to create your first component you’re well on your way to creating additional components.

Part #7: Components & Modules — App Component

In this part of the course, we look at a HelloWorld component.

Image

Image

Dan breaks down every aspect of the component for us and explains how it’s used and how our component is processed by Angular, how it’s added to app.module and ultimately how it’s rendered on our screens.

We learn that selector: 'app-root' is what allows us to later call the component from our HTML using <app-root></app-root>

We also have a sneak peek at data binding which we’ll learn more about in later chapters.

Part #8: Components & Modules — App Module

In this screencast, we spend more time learning about the inner workings of app.module which we touched on in the previous cast and learn about NgModule and BrowserModule.

Part #9: Components & Modules — Adding a Customers Component

In this cast, Dan gives us some tips on creating components using the CLI and then shows how to create components manually. We learn how to structure a component further expanding on our knowledge from Part #6.

Image

Now we bring in some data to mimic our API and learn about how modules help us keep our code organized and easier to re-use.

Part #10: Components & Modules — Adding a Customers List component

In this part, we create a customers-list.component which is an HTML table to display our list of customers. We quickly register in customers.module and use the<app-customers-list></app-customers-list> selector to display our empty table.

Image

Next step would be to populate the table with some data.

Part #11: Components & Modules — Adding a Filter Textbox Component

Before we add some data to our table, Dan shows us how to add a filter-textbox.component to our table and we reinforce the Angular way of creating a component, registering it in a module and using it in our HTML with selectors.

Image

Part #12: Components & Modules — Adding a Shared Module and Interfaces

In this section, Dan talks about using shared.module — a module where we put components or other features that we want to share throughout our app, not just in customers.

We also have a quick refresher on TypeScript interfaces and how they can be used in Angular applications to provide better code help and enhance productivity.

export interface ICustomer {  
    id: number;  
    name: string;  
    city: string;  
    orderTotal?: number;  
    customerSince: any;  
}

Part #13: Data Binding — Data Binding Overview

In this chapter we learn about data binding, learn a few techniques and see how to add data binding to our application.

We usually bind data in our templates. Data binding comes into play when a component gets our data and hooks it into a template. We can get data into a template using Property Binding, and handle user events and get data out of a template using Event Binding. Angular provides a robust and clean way to add data binding in templates that’s quick and easy to remember.

Dan provides us with a handy slide to remember syntax required…

Image

…and some on Angular directives, for example, ngFor, used to loop through items in a collection and get some properties from the items, and ngIf to add and remove an HTML element from the DOM.

Part #14: Data Binding — Getting Started with Data Binding

In this cast we play around with Property Binding and Event Binding to better understand how they work in Angular, using the knowledge from the previous chapter.

Dan shows how we can use the [hidden] property to display an h1 element dynamically:

<h1 [hidden]="!isVisible">{{ title }}</h1>

And to bind DOM events such as click:

<button (click)="changeVisibility()">Show/Hide</button>

Part #15: Data Binding — Directives and Interpolation

Here we have a look at Interpolation. The rationale is that we need to get data from each customer to generate a table row in a table from Part #10.

This is the part when things start coming together: we use directive ngFor to loop through each customer in filteredCustomers and interpolate data from a customer into a table row. We learn a few tricks about rendering data conditionally using ngIf.

Image

In the end we get a pretty looking table!

Image

Part #16: Data Binding — Event Binding

Event Binding is crucial when we need to handle an event, like a mouse move or a click. In this screencast, Dan guides us through adding functionality to sort the data in our table. We will start on it in this chapter and finish it when we get to the Services part of our course.

We create a placeholder event handler in our customer-list.component:

sort(prop: string) {  
     // A sorter service will handle the sorting  
}

Add binding in customers-list.component.html:

<tr>  
    <th (click)="sort('name')">Name</th>  
    <th (click)="sort('city')">City</th>  
    <th (click)="sort('orderTotal')">Order Total</th>  
</tr>

Part #17: Data Binding — Input Properties

We have some data in a people array in our customers.component and we need to pass it into our filteredCustomers array in customers-list.component, effectively passing data from a parent component to a child.

For that we will use Angular’s Input property which relies on a decorator named Input():

@Input() get customers(): ICustomer[] {  
    return this._customers  
}

set customers(value: ICustomer[]) {  
     if (value) {  
     this.filteredCustomers = this._customers = value;  
     this.calculateOrders();  
     }  
}

And bind to it in our parent component template to pass data from parent to child (app-customers-list in this case):

<app-customers-list [customers]="people"></app-customers-list>

Part #18: Data Binding — Working with Pipes

Wow! We’ve done quite well so far!

Image

There are a few things which might look a bit odd — “john” is lowercase and we have no “$” symbol to display currency in which we have our orders.

This is really the way we have our data, so we could just go and update it directly, or we can use a built-in Angular feature called Pipes to update it for us!

Some of the simplest pipes look like this:

{{ cust.name | uppercase }} // renders JOHN  
{{ cust.name | titlecase }} // renders John

But sometimes you might want to have your own custom pipe and Dan shows us how to build a custom capitalize pipe (note that Angular includes one called titlecase — but we’re learning here!) and how to wire it up to use in our application.

Part #19: Data Binding — Adding Filtering

In this cast, Dan walks us through adding functionality to our filter-textbox.component from Part #11

We learn more about Angular Output and EventEmitter properties, create our filter event handler and bind it to our filter textbox:

<filter-textbox (changed)="filter($event)"></filter-textbox>

And there we go, we can now filter on our customers’ names!

Image

Part #20: Services and Http — Services Overview

In this chapter, we look at Angular Services. One of Angular’s strong points is that it’s a complete framework that provides built-in support for managing state and objects through services. We saw services in the diagram earlier. Since we don’t want components to know how to do too much, we’ll rely on services to communicate with the server, perform client-side validation or calculations, etc.

Image

Components should focus on presenting data and handling user events. When additional functionality needs to be performed they should delegate to services to provide for a more maintainable application and better code reuse.

That’s exactly what Service does — some reusable functionality for the app which should not be of any component’s concern.

Luckily, Dan get us covered with a handy slide to keep in mind.

Image

Part #21: Services and Http — Creating and Providing a Service

From a chapter earlier we have seen an import of Injectible which is a decorator that allows for something called Dependency Injection or DI for short (another powerful feature built-into Angular).

We’ll use DI to access an HttpClient service which we will use to communicate with a RESTful service. We will be adding HttpClient to a constructor of our data.service and @Injectible() decorator will make DI possible.

Image

Part #22: Services and Http — Calling the Server with HttpClient

In this cast, Dan introduces Observables from RxJS — reactive extensions for JavaScript, which is not a part of Angular but is included in all Angular projects by default.

We will be using Observables to deal with asynchronous code. In a nutshell, it allows us to start an operation and then subscribe to data that is returned. Once the data comes back from the server, the subscription ends and we can unsubscribe.

Dan discusses the necessary code to call the server and then subscribe to the response using RxJS piping and operators.

Here’s an example of how we can get Orders:

Image

Part #23: Services and Http — Injecting a Service into a Component

Now that we have a way to get the data, we need to inject the service into one of our components. We can now change this.people in customers.component from being hardcoded to call a service and get data that way.

We need to bring our data.service to app.module and then in customers.component we can:

import { DataService } from '../core/data.service';

Now we can inject our DataService straight into our component’s constructor:

constructor(private dataService: DataService) {}

Part #24: Services and Http — Subscribing to an Observable

Now we can use our injected dataService, call getCustomers() and subscribe to our Observable<ICustomer[]> to get the data.

Which is pretty straightforward:

ngOnInit() {  
    this.title = 'Customers';  
    this.dataService.getCustomers()  
        .subscribe((customers: ICustomer[]) =>  
        this.people = customers);

Now we have one last service to look at — SorterService

Part #25: Services and Http — Using a SorterService

Currently, if we click on our column headers nothing would happen.

Dan handily provided a prewritten service for us, which we can use, so in this chapter, we will practice bringing in service into our components, in this case, customers-list.component.

As with other services we need to import it:

import { SorterService } from '../../core/sorter.service';

Then we inject SorterService into our constructor:

constructor(private sorterService: SorterService) {}

Dependency injection makes it extremely easy to access reusable code such as the sorter or data services.

Lastly, we use it in our sort() function:

sort(prop: string) {  
    this.sorterService.sort(this.filteredCustomers, prop);  
}

Part #26: Routing — Routing Overview

This chapter will introduce Routing, which is an essential part of modern applications. As you’re building an Angular app, you want to show different components as the user interacts with it. In our case, when a user clicks on a Customer, we might want to show them Orders. Routing is one way to very neatly achieve this.

Routes are used to hook a specific URL to a component and in the next few chapters, we will be focusing on the top part of our Angular diagram.

Image

A super great part of routing is that if a user bookmarks a specific URL, it will bring them back to a specific component and there is no need for complex show/hide logic.

Part #27: Routing — Creating a Routing Module with Routes

We begin with a familiar module-container routine and create a app-routing.module.

A main focus of the app-routing.module is to define the routes in an array:

const routes: Routes = [  
    { path: '', pathMatch: 'full', redirectTo: '/customers'},  
    { path: '**', redirectTo: '/customers' }  
];

Three key properties of routes are:

  • path — where your user goes, so path: '' would be the root of your app. path: '**' is a wild card match. It is usually placed last and it’s there to cover cases for any route that is not specified in routes
  • pathMatch — how exactly should the route match for a specific component to be displayed
  • redirectTo — when a path is matched, this is where we send the user. In our case, we send them to /customers.

Part #28: Routing — Using Router Outlet

In order to use Routing in Angular in our app.component template we replace <app-customers></app-customers> with <router-outlet></router-outlet>. Ultimately, this is just a way to say: ‘Hey, this is where a component will go when we hit our route’.

When we hit a route, then a component associated with that route will magically appear in the place of <router-outlet></router-outlet>.

Part #29: Routing — Adding a Customers Routing Module and Routes

In this chapter, Dan brings all the things together and we connect a /customer route to customers.component.

First, we create acustomers-routing.module and point our route from part #28 to customers.component like so:

const routes: Routes = [  
    { path: 'customers', component: CustomersComponent }  
];

And now when we type “customers” in the Scrimba browser address bar we get our customers.component.

Image

Part #30: Routing — Adding an Orders Component with Routes

In this clip, we’re going to quickly review how we’ve done routing to display customers, and now it’s time for routing to display their orders.

There’s a little catch though. When we click on a customer we need to display order data related to that customer. So we need to pass some dynamic data into our routing.

We can achieve this by passing a route parameter in our orders-routing.module like so:

const routes: Routes = [  
    { path: 'orders/:id', component: OrdersComponent}  
];

Note the /:id syntax. In routing the : symbol indicates that the value after it will be dynamically replaced and id is just a variable, so it can be anything like :country or :book.

Part #31: Routing — Accessing Route Parameters

In the previous screencast we saw how to create orders/:id route and now orders.component needs to somehow grab that id and display customer related orders. To do that we need to access the id route parameter.

One way of doing it would be:

let id = this.route.paramMap.get('id');

The benefit of this way is that we can subscribe to paramMap and get notified when any of the data in id changes. But we only need it once.

We can use snapshot for that:

let id = this.route.snapshot.paramMap.get('id')

snapshot just takes a kind of an instant picture of your URL and gives it to you, which perfect as that’s what we need in this situation.

But now we have a problem. Our id is a string, but to get an order from our DataService it needs to be a number. We can convert it with parseInt(), but Dan teaches us a neat + trick:

let id = +this.route.snapshot.paramMap.get('id')

Now we can call DataService to get the order and render it to orders.component.

The last thing we want to do is to add a link on a customer’s name, so we can click it to see their orders.

In part #28 we’ve added <router-outlet></router-outlet and now we just need to tell our app that we want to display orders.component when we navigate to /orders/:id.

We can do it by adding a link to our customer’s name in customers-list.component.html in a row where we’re mapping all the data to be displayed. We already have our customer object there, so we can just pass id to our route.

<a [routerLink]="['/orders', cust.id]">  
    {{ cust.name | capitalize }}  
</a>

Now we can see orders!

Image

But hey, how do we get back? We could click ‘Back’ button on the browser, but it’s much nicer to have an app link for that, now that we know routing. Let’s add it to customers-list.component.html at the very bottom.

<a routerLink="/customers">View All Customers</a>

Part #33: Course Summary

Very well done, we have our app now!

We can wrap up and have a quick recap of things done. Don’t forget to watch the actual screencast of the course, as Dan is a great teacher so you will have lots of fun following the process alongside him!

Thank you, Dan!

Image

If you’re interested in keeping up on front-end and back-end technologies make sure to follow Dan on Twitter!

Happy coding!

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

Image _Click here to get to the advanced bootcamp._

]]> <![CDATA[ How to use animation with Angular 6 ]]> https://www.freecodecamp.org/news/how-to-use-animation-with-angular-6-675b19bc3496/ 66d45dc7680e33282da25e3f Thu, 04 Oct 2018 17:40:20 +0000 By Ankit Sharma

Introduction

Animation is defined as the transition from an initial state to a final state. It is an integral part of any modern web application. Animation not only helps us create a great UI but it also makes the application interesting and fun to use. A well-structured animation keeps the user engaged with the application and enhances the user experience.

Angular allows us to create animations which provides us similar native performance as CSS animations. In this article, we will learn how we can create animation using Angular 6.

We will use Visual Studio Code for our demo.

Prerequisites

Install VS code and Angular CLI.

If you are new to Angular, then refer to my previous article Getting Started With Angular 6.0 to set up the Angular 6 development environment on your machine.

Source Code

Download the source code from GitHub.

Understanding Angular Animation States

Animation involves transition from one state of an element to another state. Angular defines three different states for an element:

  1. Void state — represents the state of an element which is not part of the DOM. This state occurs when an element is created but not yet placed in the DOM or the element is removed from the DOM. This state is useful when we want to create animation while adding or removing an element from our DOM. To define this state in our code we use the keyword void.
  2. The wildcard state — This is also known as the default state of the element. The styles defined for this state are applicable to the element regardless of its current animation state. To define this state in our code we use the * symbol.
  3. Custom state — This is the custom state of the element and it needs to be defined explicitly in the code. To define this state in our code, we can use any custom name of our choice.

Animation Transition Timing

To show the animation transition from one state to another, we define animation transition timing in our application.

Angular provides the following three timing properties:

Duration

This property represents the time our animation takes to complete from start (initial state) to finish (final state). We can define the duration of animation in the following three ways:

  • Using an integer value to represent the time in milliseconds. E.g.- 500
  • Using a string value to represent the time in milliseconds. E.g. — ‘500ms’
  • Using a string value to represent the time in seconds. E.g. — ‘0.5s’

Delay

This property represents the duration between the animation trigger and the beginning of the actual transition. This property also follows the same syntax as duration. To define the delay, we need to add the delay value after the duration value in a string format — ‘ Duration Delay’. Delay is an optional property.

For example:

  • ‘0.3s 500ms’. This means the transition will wait for 500ms and then run for 0.3s.

Easing

This property represents how the animation accelerates or decelerates during its execution. We can define the easing by adding it as the third variable in the string after duration and delay. If the delay value is not present, then easing will be the second value. This is also an optional property.

For example:

  • ‘0.3s 500ms ease-in’ — This means the transition will wait for 500ms and then run for 0.3s (300ms) with ease-in effect.
  • ‘300ms ease-out’. — This means the transition will run for 300ms (0.3s) with ease-out effect.

Creating the Angular 6 application

Open command prompt in your machine and execute the following set of commands:

  • mkdir ngAnimationDemo
  • cd ngAnimationDemo
  • ng new ngAnimation

These commands will create a directory with the name ngAnimationDemo and then create an Angular application with the name ngAnimation inside that directory.

Open the ngAnimation app using VS code. Now we will create our component.

Navigate to View >> Integrated Terminal. This will open a terminal window in VS Code.

Execute the following command to create the component.

ng g c animationdemo

This will create our component animationdemo inside the /src/app folder.

To use Angular animation we need to import BrowserAnimationsModule which is an animation-specific module in our application. Open the app.module.ts file and include the import definition as shown below:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// other import definitions

@NgModule({ imports: [BrowserAnimationsModule // other imports]})

Understanding the Angular Animation Syntax

We will write our animation code inside the component’s metadata. The syntax for the animation is shown below:

@Component({
// other component properties.
  animations: [
    trigger('triggerName'), [
      state('stateName', style())
      transition('stateChangeExpression', [Animation Steps])
    ]
  ]
})

Here we will use a property called animations. This property will take an array as input. The array contains one or more “trigger”. Each trigger has a unique name and an implementation. The state and transitions for our animation need to be defined in the trigger implementation.

Each state function has a “stateName” defined to uniquely identify the state and a style function to show the style of the element in that state.

Each transition function has a stateChangeExpression defined to show the change of the state of an element and the corresponding array of animation steps to show how the transition will take place. We can include multiple trigger functions inside the animation property as comma separated values.

These functions trigger, and state and transition are defined in the @angular/animations module. Hence, we need to import this module in our component.

To apply animation on an element, we need to include the trigger name in the element definition. Include the trigger name followed by @ symbol in the element tag. Refer to the sample code below:

<div @changeSize></div>

This will apply the trigger changeSize to the <div> element.

Let us create a few animations to get a better understanding of the Angular animation concepts.

Change Size Animation

We will create an animation to change the size of a <div> element on a button click.

Open the animationdemo.component.ts file and add the following import definition:

import { trigger, state, style, animate, transition } from '@angular/animations';

Add the following animation property definition in the component metadata:

animations: [
  trigger('changeDivSize', [
    state('initial', style({
      backgroundColor: 'green',
      width: '100px',
      height: '100px'
    })),
    state('final', style({
      backgroundColor: 'red',
      width: '200px',
      height: '200px'
    })),
    transition('initial=>final', animate('1500ms')),
    transition('final=>initial', animate('1000ms'))
  ]),
]

Here we have defined a trigger changeDivSize and two state functions inside the trigger. The element will be green in the “initial” state and will be red with an increased width and height in the “final” state.

We have defined transitions for the state change. Transition from “initial” state to “final” will take 1500ms and from “final” state to “initial” will take 1000ms.

To change the state of our element we will define a function in the class definition of our component. Include the following code in the AnimationdemoComponent class:

currentState = 'initial';

changeState() {
  this.currentState = this.currentState === 'initial' ? 'final' : 'initial';
}

Here we have defined a changeState method which will switch the state of the element.

Open animationdemo.component.html file and add the following code:

<h3>Change the div size</h3>
<button (click)="changeState()">Change Size</button>
<br />
<div [@changeDivSize]=currentState></div>
<br />

We have defined a button which will invoke the changeState function when clicked. We have defined a <div> element and applied the animation trigger changeDivSize to it. When we click on the button it will flip the state of the

element and its size will change with a transition effect.

Before executing the application, we need to include the reference to our Animationdemo component inside the app.component.html file.

Open app.component.html file. You can see we have some default HTML code in this file. Delete all the code and put the selector of our component as shown below:

<app-animationdemo></app-animationdemo>

To execute the code run the ng serve command in the VS code terminal window. After running this command, it will ask to open http://localhost:4200 in the browser. So, open any browser on your machine and navigate to this URL. You can see a webpage as shown below. Click on the button to see the animation.

Image Change Div size using Angular animation

Balloon effect animation

In the previous animation, the transition happened in two directions. In this section, we will learn how to change the size from all directions. It will be similar to inflating and deflating a balloon, hence the name balloon effect animation.

Add the following trigger definition in the animation property:

trigger('balloonEffect', [
   state('initial', style({
     backgroundColor: 'green',
     transform: 'scale(1)'
   })),
   state('final', style({
     backgroundColor: 'red',
     transform: 'scale(1.5)'
   })),
   transition('final=>initial', animate('1000ms')),
   transition('initial=>final', animate('1500ms'))
 ]),

Here, instead of defining the width and height property, we are using the transform property to change the size from all directions. The transition will occur when the state of the element is changed.

Add the following HTML code in the app.component.html file:

<h3>Balloon Effect</h3>
<div (click)="changeState()" 
  style="width:100px;height:100px; border-radius: 100%; margin: 3rem; background-color: green"
  [@balloonEffect]=currentState>
</div>

Here we have defined a div and applied the CSS style to make it a circle. Clicking on the div will invoke the changeState method to switch the element’s state.

Open the browser to see the animation in action as shown below:

Image Balloon effect animation using Angular 6

Fade In and Fade Out animation

Sometimes we want to show animation while adding or removing an element on the DOM. We will see how to animate the addition and removal of an item to a list with a fade-in and fade-out effect.

Add the following code inside the AnimationdemoComponent class definition for adding and removing the element in a list:

listItem = [];
list_order: number = 1;

addItem() {
  var listitem = "ListItem " + this.list_order;
  this.list_order++;
  this.listItem.push(listitem);
}
removeItem() {
  this.listItem.length -= 1;
}

Add the following trigger definition in the animation property:

trigger('fadeInOut', [
  state('void', style({
    opacity: 0
  })),
  transition('void <=> *', animate(1000)),
]),

Here we have defined the trigger fadeInOut. When the element is added to the DOM it is a transition from void to wildcard () state. This is denoted using void =>; . When the element is removed from the DOM, it is a transition from wildcard () to void state. This is denoted usi`ng =>`; void.

When we use the same animation timing for both directions of the animation, we use the shorthand syntax <;=>. As defined in this trigger, the animation from void =&gt; * and * => void will take 1000ms to complete.

Add the following HTML code in app.component.html file.

<h3>Fade-In and Fade-Out animation</h3>

<button (click)="addItem()">Add List</button>
<button (click)="removeItem()">Remove List</button>

<div style="width:200px; margin-left: 20px">
  <ul>
    <li *ngFor="let list of listItem" [@fadeInOut]>
      {{list}}
    </li>
  </ul>
</div>

Here we are defining two buttons to add items to and remove them from the list. We are binding the fadeInOut trigger to the <li> element, which will show a fade-in and fade-out effect while being added and removed from the DOM.

Open the browser to see the animation in action as shown below:

Image Fade-in and Fade-out animation using Angular 6

Enter and Leave animation

When adding to the DOM, the element will enter the screen from the left. When deleting, the element will leave the screen from the right.

The transition from void => * and * => void is very common. Therefore, Angular provides aliases for these animations:

  • for void => * we can use ‘:enter’
  • for * => void we can use ‘:leave’

The aliases make these transitions more readable and easier to understand.

Add the following trigger definition in the animation property:

trigger('EnterLeave', [
  state('flyIn', style({ transform: 'translateX(0)' })),
  transition(':enter', [
    style({ transform: 'translateX(-100%)' }),
    animate('0.5s 300ms ease-in')
  ]),
  transition(':leave', [
    animate('0.3s ease-out', style({ transform: 'translateX(100%)' }))
  ])
])

Here we have defined the trigger EnterLeave. The ‘:enter’ transition will wait for 300ms and then run for 0.5s with an ease-in effect. Whereas the ‘:leave transition will run for 0.3s with an ease-out effect.

Add the following HTML code in the app.component.html file:

<h3>Enter and Leave animation</h3>

<button (click)="addItem()">Add List</button>
<button (click)="removeItem()">Remove List</button>

<div style="width:200px; margin-left: 20px">
  <ul>
    <li *ngFor="let list of listItem" [@EnterLeave]="'flyIn'">
      {{list}}
    </li>
  </ul>
</div>

Here we are defining two buttons to add items to and remove them from the list. We are binding the EnterLeave trigger to the <li> element that will show the enter and leave effect while being added and removed from the DOM.

Open the browser to see the animation in action as shown below:

Image Enter and leave animation using Angular 6

Conclusion

In this article, we’ve learned about Angular 6 animations. We explored the concept of animation states and transitions. We also saw a few animations in action with the help of a sample application.

Please get the source code from GitHub and play around to get a better understanding.

If you’re preparing for interviews, read my article on C# Coding Questions For Technical Interviews.

See Also

Originally published at https://ankitsharmablogs.com/

]]> <![CDATA[ How to make image upload easy with Angular ]]> https://www.freecodecamp.org/news/how-to-make-image-upload-easy-with-angular-1ed14cb2773b/ 66c3535fbf3e128ced96e93f Tue, 11 Sep 2018 15:07:36 +0000 By Filip Jerga

This is the second part of the tutorial on how to upload an image to Amazon S3. You can find the first part here. In this article, we will take a look at the Angular Part.

You can also watch my step by step video tutorial of an image upload. The link is provided at the bottom of this article.

1. Create a template first

First, we want to create a reusable component that will be easily pluggable into other components.

Let’s start with a simple HTML template for our input. Don’t forget to apply styles of your choice, or you can get them from my GitHub repo.

<label class="image-upload-container btn btn-bwm">
  <span>Select Image</span>
  <input #imageInput
         type="file"
         accept="image/*"
         (change)="processFile(imageInput)">
</label>

Important here is a type of input, which is set to a file. The Accept attribute defines accepted files for input. Image/* specifies that we can choose images of any type by this input. #imageInput is a reference of input on which we can access uploaded files.

A Change event is fired when we select a file. So let’s take a look at the class code.

2. Don’t forget for Component Code

class ImageSnippet {
  constructor(public src: string, public file: File) {}
}

@Component({
  selector: 'bwm-image-upload',
  templateUrl: 'image-upload.component.html',
  styleUrls: ['image-upload.component.scss']
})
export class ImageUploadComponent {

  selectedFile: ImageSnippet;

  constructor(private imageService: ImageService){}

  processFile(imageInput: any) {
    const file: File = imageInput.files[0];
    const reader = new FileReader();

    reader.addEventListener('load', (event: any) => {

      this.selectedFile = new ImageSnippet(event.target.result, file);

      this.imageService.uploadImage(this.selectedFile.file).subscribe(
        (res) => {

        },
        (err) => {

        })
    });

    reader.readAsDataURL(file);
  }
}

Let’s break down this code. You can see in the processFile that we are getting an image input we sent from the change event. By writing imageInput.files[0] we are accessing the first file. We need a reader in order to access additional properties of a file. By calling readAsDataURL, we can get a base64 representation of an image in the callback function of the addEventListener we subscribed to before.

In a callback function, we are creating an instance of the ImageSnippet. The first value is a base64 representation of an image we will display later on the screen. The second value is a file itself, which we will send to the server for upload to Amazon S3.

Now, we just need to provide this file and send a request through a service.

3. We need a service as well

It wouldn’t be an Angular app without a service. The service will be the one responsible for sending a request to our Node server.

export class ImageService {

  constructor(private http: Http) {}


  public uploadImage(image: File): Observable<Response> {
    const formData = new FormData();

    formData.append('image', image);

    return this.http.post('/api/v1/image-upload', formData);
  }
}

As I told you in the previous lecture, we need to send an image as part of the form data. We will append the image under the key of an image to form data (same key we configured before in Node). Finally, we just need to send a request to the server with formData in a payload.

Now we can celebrate. That’s it! Image sent to upload!

In the next lines, I will provide some additional code for a better user experience.

4. Additional UX Updates

class ImageSnippet {
  pending: boolean = false;
  status: string = 'init';

  constructor(public src: string, public file: File) {}
}

@Component({
  selector: 'bwm-image-upload',
  templateUrl: 'image-upload.component.html',
  styleUrls: ['image-upload.component.scss']
})
export class ImageUploadComponent {

  selectedFile: ImageSnippet;

  constructor(private imageService: ImageService){}

  private onSuccess() {
    this.selectedFile.pending = false;
    this.selectedFile.status = 'ok';
  }

  private onError() {
    this.selectedFile.pending = false;
    this.selectedFile.status = 'fail';
    this.selectedFile.src = '';
  }

  processFile(imageInput: any) {
    const file: File = imageInput.files[0];
    const reader = new FileReader();

    reader.addEventListener('load', (event: any) => {

      this.selectedFile = new ImageSnippet(event.target.result, file);

      this.selectedFile.pending = true;
      this.imageService.uploadImage(this.selectedFile.file).subscribe(
        (res) => {
          this.onSuccess();
        },
        (err) => {
          this.onError();
        })
    });

    reader.readAsDataURL(file);
  }
}

We added new properties to the ImageSnippet: Pending and Status. Pending can be false or true, depending if an image is currently being uploaded. Status is the result of the uploading process. It can be OK or FAILED.

OnSuccess and onError are called after image upload and they set the status of an image.

Ok, now let’s take a look at the updated template file:

<label class="image-upload-container btn btn-bwm">
  <span>Select Image</span>
  <input #imageInput
         type="file"
         accept="image/*"
         (change)="processFile(imageInput)">
</label>


<div *ngIf="selectedFile" class="img-preview-container">

  <div class="img-preview{{selectedFile.status === 'fail' ? '-error' : ''}}"
       [ngStyle]="{'background-image': 'url('+ selectedFile.src + ')'}">
  </div>

  <div *ngIf="selectedFile.pending" class="img-loading-overlay">
    <div class="img-spinning-circle"></div>
  </div>

  <div *ngIf="selectedFile.status === 'ok'" class="alert alert-success"> Image Uploaded Succesfuly!</div>
  <div *ngIf="selectedFile.status === 'fail'" class="alert alert-danger"> Image Upload Failed!</div>
</div>

Here we are displaying our uploaded image and errors on the screen depending on the state of an image. When the image is pending, we also display a nice spinning image to notify the user of uploading activity.

5. Add some styling

Stylings are not the focus of this tutorial, so you can get all of the SCSS styles in this link.

Job done! :) That should be it for a simple image upload. If something is not clear, make sure you watched the first part of this tutorial first.

If you like this tutorial, feel free to check my full course on Udemy — The Complete Angular, React & Node Guide | Airbnb style app.

Completed Project: My GitHub repository

Video Lecture: YouTube Tutorial

Cheers,

Filip

]]> <![CDATA[ Why AngularJS is my preferred framework for software development ]]> https://www.freecodecamp.org/news/why-is-angularjs-the-most-preferred-framework-for-software-development-5253c2c569c9/ 66c366ed8e244e1678738659 Mon, 16 Jul 2018 10:17:12 +0000 By Rachael Ray

AgularJS is one of the most versatile and popular frameworks available today. Google introduced it in 2012. It provides a scalable infrastructure that supports Google’s largest applications.

Image AngularJS Development

AngularJS, a structured JavaScript framework, builds dynamic single page applications. It is a client-side framework that supports multiple platforms. All the functions and commands of this framework use code templates written in HTML script.

Moreover, the AngularJS framework has many powerful features. These features allow decoupling any application logic from DOM (Document Object Model) manipulation. It also provides a host of amazing and useful features. This is why AngularJS development is often the preferred option for businesses.

Here is a list of features that AngularJS offers

1. Model View Controller (MVC) Framework

MVC is a software design pattern for developing web applications. It is made up of:

Model: the first level of the pattern which is responsible for maintaining data. It is similar to primitive data types like booleans, numbers, strings or objects. It is the simplest script without any getter and sorter methods.

View: responsible for showing portions of data to the user. They present the data in a particular format triggered by the controller’s action.

Controller: controls the interaction between the Model and the View. It responds to user input and interacts with the data model objects. The controller receives the input, validates it, and then conducts the operations.

As AngularJS is an open-source script, the working model is based on MVC patterns and the newest client-side JavaScript. The Model View Framework Control Architecture in AngularJS is easy, versatile, and dynamic.

MVC makes it easier to build a separate client-side application. With AngularJS, even if the MVC elements were developed separately, you can combine them. There is no need to write extra code to combine all the attributes together.

2. User interface with HTML

User interfaces in AngularJS are built on HTML. It is a declarative language which has shorter tags and is extremely easy to comprehend. Even the interface it provides is organized, smooth, and structured.

Many times, it becomes complex to develop, organize, and reorganize the JavaScript Interfaces. So, the HTML interface can also regulate the implementation of the application. So, rather than understanding program flow and loading, you can define what you want and AngularJS will carve out the dependencies.

3. POJO Model

As compared to other frameworks, AngularJS uses POJO (Plain Old JavaScript) objects. Now, that means you do not need to add additional getter and setter elements to bind AngularJS along with additional data sources.

A POJO model also provides spontaneous and well-planned objects. Developers have to create loops of objects and loops of arrays with the required properties. Then they need to adjust and reframe it.

This makes AngularJS self-sufficient and easy to use. The well planned and quick application of the POJO model is one of the reasons to use AngularJS in your next development project.

4. Active community on Google

Whenever you want to adopt a framework for development, you always look for good community support. AngularJS doesn’t disappoint here either.

Why? Because Google maintains AngularJS. In addition to that, it is released under the MIT license and is available for download on GitHub.

So, if you have any maintenance issues or get stuck somewhere, there are many forums where you can get your queries solved. Also, if you have any suggestions or any can improve something, the source is easily available for download.

5. Routing

Routing is basically the transition from one view to another. Now, this is the key aspect of single page applications.

In single page applications, everything comes in one single page. Developers don’t want to redirect the users to a new page every time they click on a menu or a sub-menu. The developers want the content to load asynchronously on the same page with just the URL changing.

Almost all websites work on this method. Some of the popular platforms like the Chrome app store and Twitter are the best examples of Single Page Applications. This method helps the user feel as if they are interacting with a desktop app.

Now, with AngularJS, this becomes an easy task and you can make various views for various URLs. AngularJS also enables you to load the appropriate view in the main page for a specific URL request. This is another reason why developers love AngularJS.

6. Two-way binding

Data binding is the automatic synchronization of data between the view and the model. The view indicates the HTML and the model indicates the JavaScript variables.

In AngularJS, you can easily build a template which can bind different components with different models. In this way, whenever the value of any HTML or view component differs, the bound model value also gets updated.

Let’s say if the input text value changes, the bound model is also changed and updated accordingly. To control the changing data, there is no need to program a separate set of callback functions.

With two-way data binding, the application's presentation layer becomes very simple. As a result, the UI is clean and has an improved appeal. Also, complex data manipulations and calculations can be done with ease.

To sum up

Cross-browser web applications built using AngularJS are user-friendly and interactive. One more benefit of AngularJS is that it analyzes the page DOM and then builds bindings which are based on AngularJS-specific elements.

As a result, it significantly reduces the coding part as compared to other frameworks. A single code set for one application and your task is done. Also, less coding means reduced chances of error.

AngularJS is a great multi-functional framework which speeds up your development process. It offers dependency injection and deep linking, and is a robust platform for software development.

]]> <![CDATA[ The brain-fatigued JavaScripter’s guide to modern frontend tooling ]]> https://www.freecodecamp.org/news/the-brain-fatigued-javascripters-guide-to-modern-frontend-tooling-in-2018-9818a04e9ec5/ 66c360f89539e75f2cc24a31 Fri, 29 Jun 2018 01:05:45 +0000 By Amin Mohamed Ajani

From package managers to ESLint, CommonJS to AMD, and ES6 Modules to Babel and Webpack — that’s a lot of tools! In this article, we’ll migrate an old AngularJS app where we’ll decode the tools NOW.

I’m tired…

Yes, I got the fatigue today.

Which got me thinking, I could have stayed working in sales and not taken a detour to front end web development. But then I realized that front end development is for the brave hearts, and brave hearts don’t quit. They win.

So I’m choosing to win by writing something worthwhile for fatigued victims of front end development and its tooling. I’ll be writing on how I transformed beginner code to a full-blown production level application, and the tools I configured in the process.

Let’s get started!

What we’re building

Nothing fancy. We’re building a web application that fetches some random users from an API and displays it on the front-end. It will have no routing extraordinare*.* The end goal of the article is to equip you to get used to frontend tooling.

I’m using AngularJS with no boilerplate, so we that aren’t abstracted away from CLIs that leaves us breathless and in the awe of black magic funnery. Note: I’m using AngularJS and not Angular. AngularJS because I couldn’t find any posts related to AngularJS tooling and bundling.

Let’s start by creating an index file on our root directory.

<html>
<head>
    <title>Random User!</title>
    <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
</head>
<body>
<div class="container">
    <h1 class="text-center">Random User!</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script>
</body>

Good old days of yore. Got an Angularjs file and a minimal CSS framework from the CDN, and then we start cooking our JavaScript code and keep attaching it to the index line by line.

But as your app will grow, it will be necessary to keep track of all your dependencies (in this case, Angular).

Enter Package Managers

So a lot of people resort to having a package manager which keeps track of the versions of dependencies they use on their project. A package manager’s single most USP is to goto the GitHub of the dependency, download it in your folder, and keep track of the version downloaded. This helps you not break your code if you move your repo and later download another version.

There was duojs, jspm, bower, npm and now, there is:

Go ahead, install it. We’re gonna need it. When we add a dependency in our application, yarn will download the stuff and keep it inside the node_modules folder. From then on, if you need the file, you can src-reference into your index.

yarn add angular

Image

While we’re doing this, let’s also add app.js, userController.js, and userFactory.js files in our root directory and link them up into our index file.

App.js:

/**
 * /app.js
 */

var app = angular.module("RandomApp", []);

userFactory.js:

// /userFactory.js
app.factory("UserF", function($http) {
    var UserF = {};
    UserF.getUsers = function(){
        return $http({
            method: 'GET',
            url: 'https://www.reqres.in/api/users',
        })
    };
    return UserF;
});

userController.js:

// /userController.js
app.controller("userController", function($scope, UserF){
    $scope.users = [];
    UserF.getUsers()
        .then(function(res) {
            $scope.users = res.data.data;
        })
});

index.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Random User!</title>
    <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
</head>
<body>
<div class="container" ng-app="RandomApp">
    <h1 class="text-center">Random User!</h1>
    <div ng-controller="userController">
        <div ng-repeat="user in users">
            <div class="card">
                <div class="card-image">
                    <img ng-src="{{user.avatar}}" class="img-responsive">
                </div>
                <div class="card-header">
                    <div class="card-title h5">{{user.first_name}} {{user.last_name}}</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="app.js"></script>
<script src="userController.js"></script>
<script src="userFactory.js"></script>
</body>
</html>

Problems with this approach

The order of our script tag must be in that specific order. app.js makes the variable app and then attaches it to the global window object. This app variable is then used by the rest of the script files. This is often called global namespace pollution, and if you are still using this approach, don’t. Further, if we open any one JS file in any given moment, we will have no idea what the app variable holds.

Another semantic problem with this code is that this code uses anonymous functions. Anonynous functions are both a boon and bane to JavaScript. Always name your anonymous function. It will make stack traces easier to debug.

Now wouldn’t it be cool if we could have a JS police that pointed out this stuff to us while we wrote?

ESLint

ESLint is a linter. Kind of like code-pairing with a stricter version of you. Linters save time for you by debugging your code before you even run your application. Also it forces you and your team to follow clean code practices. Who says no to such an awesome teacher?

Configuring ESLint

yarn add eslint eslint-config-airbnb eslint-config-airbnb-base -D

We’ll be using Airbnb’s style configuration that runs through our code and tells us wherever we’re writing the code in a non-standard way. The above command will install the configurations in the node_modules folder, but we will need to tell ESLint to use these. Make a file called .eslintrc.json and fill it up with:

// .eslintrc.json
{
  "extends": [
    "airbnb/legacy"
  ],
  "env": {
    "browser": true
  }
}

The extends stack tells ESLint to use the Airbnb rules on top of its own rules. The env variable tells ESLint to not scream at us if we’re using variables like window without initializing it. To lint through all our files, you can use a wildcard *.

node_modules/.bin/eslint *.js

Let’s run ESLint on our files and see what happens.

Image

These are all rules defined in the Airbnb style guide. I’ll leave it up to you to fix your files. It’s always better to have a linter from the beginning. Of course, you can also switch off a particular rule. For example, if you prefer no-semicolon, or the double-quote style to single quote, you can switch them off. ESLint will give you that flexibility.

Modules

Now let’s talk about modularity. When making large scale applications, we need to have our code well-structured so that it’s easier to scale. We put in place a separation of concerns by grouping code pieces in separate modules. JavaScript didn’t support modules until ES6 came along. But the concept of modularity came long before ES6.

CommonJS

Before ES6, this standard was adopted as a pattern where you write your piece of code and tell the environment to export that piece. And then you’d use a library like RequireJS to import the module.

// util.js
module.export = {
    noop: function(){},
    validateUrl: function(s){
      return s.matches(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/)
    } 
};

// postController.js
var validateUrl = require('./util').validateUrl;
var handleSubmit = function handleSubmit(e) {
    if(!validateUrl(e.target.value)) {
       return;
    }
    submitUrl(e.target.value);
}

If you’ve tinkered around with Node, you may find that piece of code very familiar. But there are downsides to this standard, because it’s synchronous. Which means that unless validateUrl is required*,* handleSubmit on Line 3 of postController above isn’t executed. The code halts.

This ideology works fine in Node.js. In Node, we can have a lot of dependencies before starting a server. For example, configuring log files, connecting to the DB on cloud, configuring secret keys. But on the front end, it is not always required.

Asynchronous Module Definition (AMD)

Like the name suggests, it asynchronously loads modules and has a few more advantages over CommonJS patterns. Here’s how the code looks like in AMD (I added a couple of functions). Do you see something familiar?

define(['validateSpam', 'blockUser', function(validateSpam, blockUser){
  return {
    noop: function(){},
    validateUrl: function(s) {
      return s.matches(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/)
    },
    validateSpammyComment: function validateSpammyComment(comment, userID) {
      if(validateSpam(comment)) {
        blockUser(userID);
        return false;
      }
      return true;
  }

It kind of feels like the way we Inject Dependencies in AngularJS on Line 1.

ES6 Modules

Since the committee at TC39 saw developers using external libraries, they clearly felt the need for JavaScript to support modules. So they introduced them in ES6. Let’s use them!

utils.js:

function noop(){};
function validateUrl(s) {
  return s.matches(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/)
}
export {
  noop,
  validateUrl
}

postController:js


import { validateUrl } from './util';

var handleSubmit = function handleSubmit(e) {
    if(!validateUrl(e.target.value)) {
       return;
    }
    submitUrl(e.target.value);
}

No external library to call. Import/export natively supported. But there are still versions of browsers which do not completely support all the features of ES6. This inconsistency of browser support didn’t stop programmers from writing the next generation of JavaScript. Tools like babel are available that scan through the JavaScript and transpile it down to browser compatible code. And just like that, your code supports older browsers like IE (oh IE die already!).

Babel and ES6

Okay, so let’s convert our old JavaScript to newer JavaScript. A little bit so that we can add some modularity. All this while, let’s keep our linter from yelling.

// /userFactory.js
let angular = window.angular;
let app = angular.module('RandomApp');

/**
 * A User factory which gets the user list
 * @param $http
 */

let userFactory = $http => {
  let UserF = {};
  UserF.getUsers = () => $http({
    method: 'GET',
    url: 'https://www.reqres.in/api/users'
  });
  return UserF;
};
app.factory('UserF', userFactory);

// /userController.js

let angular = window.angular;
let app = angular.module('RandomApp');

/**
 * Controls the user
 * @param $scope
 * @param UserF
 */
let userController = ($scope, UserF) => {
  $scope.users = [];
  UserF.getUsers().then(res => $scope.users = res.data.data);
};
userController.$inject = ['$scope', 'UserFactory'];

app.controller('userController', userController);

Problem with this code

This code won’t work. Because the let keyword of ES6 creates block scoped variables, and we can’t redefine a block scoped variable inside it’s own scope again. Remember: we’re still sitting on the global scope. We’ll fix this.

The reason why I asked you to refactor the code is because I want you to use babel on this and see the magic yourself. Time to fire up that terminal.

yarn add babel-cli babel-preset-env

This will add babel-cli and babel-preset-env.

Babel plugins and presets

The code goes through a series of transformations, and you can choose what kinds of transformations you want. You can have it convert arrow functions to anonymous, transform spread operators, transform for…of loops and a lot more. These transformations are what we call plugins.

You can pick and choose what kinds of transformations you want. Groups of plugins are called presets. Babel-preset-env creates a moving target for your babel. You are not pin-pointing the actual version of JavaScript, but you are asking babel to track the last n versions of all browsers.

Now make a babel configuration file: .babelrc and place it in the root folder.

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": "last 2 versions"
      }
    }]
  ]
}

Now, if you run the following command on your terminal, babel will do its job. Go ahead, try it out:

node_modules/.bin/babel *.js

Image

there’s only so much I can screencap. But you get the drill..

Nifty stuff, right? Babel gave a preview of how the files will look if it were to convert the files for us.

Now let’s take a breather and think about what all we’ve accomplished so far. We’ve broken down a JavaScript file into many files. We’ve added a linter so that it yells at us if we write funny code. We’re writing JavaScript in the future and making it available to the browser in a version it understands. We’ve polluted the global namespace, but we’ve done it awesomely which we will fix soon.

If only there was a tool that does all that automatically. We’d tell it to take our code, run the linter for any errors before the code hits production, and transpile it to browser compatible code. Yes, there is such a tool.

Let’s automate the hell out of this.

Bundling with Webpack

First, move all JS files into a folder. And let’s use standard mnemonics and name the folder build. Also, let’s refactor our JavaScript files so that we can have all our files built up in a single file.


// /build/userController.js

/**
 * Controls the user
 * @param $scope
 * @param UserF
 */
let userController = ($scope, UserF) => {
    $scope.users = [];
    UserF.getUsers().then(res => $scope.users = res.data.data);
};
userController.$inject = ['$scope', 'userFactory'];

export default userController;

// /build/userFactory.js
/**
 * A User factory which gets the user list
 * @param $http
 */

let userFactory = $http => {
    let UserF = {};
    UserF.getUsers = () => $http({
        method: 'GET',
        url: 'https://www.reqres.in/api/users'
    });
    return UserF;
};
userFactory.$inject = ['$http'];

export default userFactory;

// /build/app.js
import angular from 'angular';

import userController from './userController';
import userFactory from './userFactory';

angular.module('RandomApp', [])
  .factory('userFactory', userFactory)
  .controller('userController', userController);

yarn add webpack webpack-dev-server babel-loader eslint-loader -D

And now, create a webpack.config.js file:

var path = require('path');

module.exports = {
    mode: 'development', // tells webpack that this is a development build. the 'production' switch will minify the code among other things
    devtool: 'cheap-eval-source-map', // generate source maps for better debugging and dont take much time.
    context: __dirname, // since this runs in a node environment, webpack will need the current directory name
    entry: './build/app.js', // take this file and add to the bundled file whatever this file imports
    output: {
        path: path.join(__dirname, 'dist'), // output this in a dist folder
        filename: 'bundle.js' // and name it bundle.js
    },
  // read medium post to know what's module and devServer because I dont have much room for comments
    module: {
      rules: [{
        enforce: 'pre',
        loader: 'eslint-loader',
        test: /\.js$/
      }, {
        loader: 'babel-loader',
        test: /\.js$/
      }]
    },
    devServer: {
        publicPath: '/dist/',
        filename: 'bundle.js',
        historyApiFallback: true,
        overlay: true
    }
};

If you now fire up Webpack, you will see all files bundled up in a single file in a dist folder.

webpack

Image

Bliss.

Dissecting Webpack Configuration

Congratulations. Give yourself a pat on the back. You bundled your files so that they’re almost production ready. Now let’s talk about the configuration. I’ll break it down and tell you exactly what each key is. For more, you can always read the manual.

I’ve commented most of the stuff. Here, I talk about the left out stuff:

Webpack Loaders (module object)

Think of this as a chain of code-loading units in a pipeline. The last one in the stack (babel-loader in our case) is the first one which Webpack uses for loading the code chunks. We’re asking Webpack to go through our code and transpile it first into ES5 using the babel-loader.

A loader object will also need a test key. It uses this key to find all files it needs to pick up (in our case, a regex that matches files ending with the extension dot JS). Once transpiled, proceed to the next loader (eslint-loader in our case). And in the end, write the changes from memory to a file and dump it in the file which we’ve specified in the output object.

But that’s not what our config does. We’ve added an enforce-pre on our ESLint loader because we want the linting first. Because the output will be a single file. And that file will be in a barely human readable format if we use minification and obfuscation (which is often the case in production). The Linter will go crazy looking at our end code. We don’t want that. So Webpack will lint first and then transpile.

Apart from these, there are many loaders you can use, be it to load your style files, your SVGs, or fonts. One loader that I almost always end up using at work is the html-loader.

HTML loader

In the case of Angular, when we have templates in directives/components, we can use an html-loader in Webpack.

templateUrl: './users/partial/user.tpl.html' // instead of this,
templateUrl: require('./users/partial/user.tpl.html')

Webpack thrives on a super huge community which comes up with awesome loaders with great documentation. For all your needs, chances are, there is at least one loader written.

Webpack Dev Server (devServer)

Webpack dev server is a module that comes separate from Webpack. It spins up its own server and watches the files we change. If you make any changes, the WDS will bundle it again and refresh the page. If there are errors, it will refresh the page to an overlay screen (configured by the overlay key) and show you the error right on the browser. And it’s super fast because it does all that in the memory and not on the hard storage.

Of course, to get it to work, you first need to have a base build file (that is, run Webpack at least once to have a build file). Once you have that, you can fire up this command. It will start the server and serve the static files, open the browser for you on port 8080 by default, and keep watching the changes.

webpack-dev-server --open

That’s it!

But this is not the end of it if you think about it. There are still so many things you can do. At work, we use Flow for static type check while we code. A static type checker looks at your code and warns you if you’re, say, calling functions with the wrong type of arguments. You can integrate that as well in Webpack.

We also use Prettier to format our code automatically as we type. It just makes the code more readable.

Any fool can write code that a computer can understand. Good programmers write code that humans can understand — Martin Fowler.

I’m going to put that up as a poster on my desk soon.

Conclusion

Congratulations! You did it!

If you survived reading this larger than life article, let me give you an over-the-internet-hi-five and tell you that today, you won. Surviving JavaScript is not easy for me. I wish I could have known all this while working on my first project as a UI guy. But I guess that’s how front-end development is for me. Keep learning, keep evolving.

I’m tinkering with React for now, and I soon may come up with another article if you liked this one. Maybe include ReasonML, GraphQL or Redux. If you liked this article or hated it or have some feedback, please do tell me.

I live on twitter as @AminSpeaks and everywhere else as @binarybaba.

Cheers and Godspeed.

]]> <![CDATA[ How to get started with Angular 6.0 ]]> https://www.freecodecamp.org/news/how-to-get-started-with-angular-6-0-a196cbfb9bbb/ 66d45db3246e57ac83a2c715 Sun, 06 May 2018 16:16:54 +0000 By Ankit Sharma

Learn what’s new and build an app

Angular has released its latest version, Angular 6.0. In this article, we will understand the new features of Angular 6.0 and also set up a new project with the help of Angular CLI 6.0 and Visual Studio Code.

What’s new in Angular 6.0?

ng update

A new CLI command that will update your project dependencies to their latest versions.

ng add

Another new CLI command that makes adding new capabilities to your project easier.

Angular Elements

This is a new feature that allows us to compile Angular components to native web components which we can use in our Angular app.

element is deprecated

You can’t use anymore inside of your component templates. You need to use instead.

Library support

Angular CLI now has the support for creating and building libraries. To create a library project within your CLI workspace, run the following command: ng generate library (for example: ng generate library my-demo-lib)

Angular Material Starter Components

If you run “ng add @angular/material” to add material to an existing application, you will also be able to generate 3 new starter components:

  • Material Sidenav
    A starter component including a toolbar with the app name and the side navigation
  • Material Dashboard
    A starter dashboard component containing a dynamic grid list of cards
  • Material Data Table
    A starter data table component that is pre-configured with a datasource for sorting and pagination

Workspace support

Angular CLI now has support for workspaces containing multiple projects, such as multiple applications and/or libraries.

The “.angular-cli.json” file has been deprecated

Angular projects will now use “angular.json” instead of “.angular-cli.json” for build and project configuration.

Use RxJS V6

Angular 6 will also allow us to use RxJS V6 with our application.

Tree Shakable Providers

Angular 6.0 allows us to bundle services into the code base in modules where they are injected. This will help us to make our application smaller.

For example: Earlier, we used to reference our services as below.

// In app.module.ts    @NgModule({    ...    providers: [MyService]  })  export class AppModule {}    // In myservice.ts     import { Injectable } from '@angular/core';    @Injectable()  export class MyService {    constructor() { }  }

This approach will still work, but Angular 6.0 provides a new and easier alternative to this. We no longer need to add references in our NgModule. We can inject the reference directly into the service. Therefore, we can use the service as below:

// In myservice.ts    import { Injectable } from '@angular/core';    @Injectable({    providedIn: 'root',  })  export class MyService {    constructor() { }  }

Those are the new features/improvements in the latest release of Angular. Let’s move on and create our first application using Angular 6.0.

Prerequisites

  • Install the latest version of Node.js from here
  • Install Visual Studio Code from here

Installing Node.js will also install npm on your machine. After installing Node.js, open the command prompt and run the following set of commands to check the version of Node and npm installed on your machine.

Refer to the below image:

Image

Now that we’ve installed Node and npm, the next step is to install Angular CLI. Run the following command in a command window. This will install Angular 6.0 CLI globally on your machine.

Image

Open VS Code and navigate to View >> Integrated Terminal.

Image

This will open a terminal window in VS Code.

Type the following sequence of commands in the terminal window. These commands will create a directory with the name “ng6Demo” and then create an Angular application with the name “ng6App” inside that directory.

  • mkdir ng6Demo
  • cd ng6Demo
  • ng new ng6App

Image

There we go — we have created our first Angular 6 application using VS Code and Angular CLI. Now run the following command to open the project.

Refer to the image below:

Image

This will open the code file of our application in a new VS Code window. You can see the following file structure in Solution Explorer.

Image

Notice that the folder structure is a little bit different from the older version of Angular. We have a new “angular.json” file instead of the old “.angular-cli.json” file. This config file will still serve the same task as before, but the schema has changed a bit.

Open the package.json file and you can observe that we have the latest Angular 6.0.0 packages installed in our project.

{    "name": "ng6-app",    "version": "0.0.0",    "scripts": {      "ng": "ng",      "start": "ng serve",      "build": "ng build",      "test": "ng test",      "lint": "ng lint",      "e2e": "ng e2e"    },    "private": true,    "dependencies": {      "@angular/animations": "^6.0.0",      "@angular/common": "^6.0.0",      "@angular/compiler": "^6.0.0",      "@angular/core": "^6.0.0",      "@angular/forms": "^6.0.0",      "@angular/http": "^6.0.0",      "@angular/platform-browser": "^6.0.0",      "@angular/platform-browser-dynamic": "^6.0.0",      "@angular/router": "^6.0.0",      "core-js": "^2.5.4",      "rxjs": "^6.0.0",      "zone.js": "^0.8.26"    },    "devDependencies": {      "@angular/compiler-cli": "^6.0.0",      "@angular-devkit/build-angular": "~0.6.0",      "typescript": "~2.7.2",      "@angular/cli": "~6.0.0",      "@angular/language-service": "^6.0.0",      "@types/jasmine": "~2.8.6",      "@types/jasminewd2": "~2.0.3",      "@types/node": "~8.9.4",      "codelyzer": "~4.2.1",      "jasmine-core": "~2.99.1",      "jasmine-spec-reporter": "~4.2.1",      "karma": "~1.7.1",      "karma-chrome-launcher": "~2.2.0",      "karma-coverage-istanbul-reporter": "~1.4.2",      "karma-jasmine": "~1.1.1",      "karma-jasmine-html-reporter": "^0.2.2",      "protractor": "~5.3.0",      "ts-node": "~5.0.1",      "tslint": "~5.9.1"    }  }

The name of our Angular application is ng6app which is inside ng6demo directory.

So, we will first navigate to our application using the below commands.

And then we use the following command to start the web server.

Image

After running this command, you can see that it is asking to open http://localhost:4200 in your browser. So, open any browser on your machine and navigate to this URL. Now, you can see the following page.

Image

Now we will try to change the welcome text on the screen. Navigate to /src/app/app.component.ts file and replace the code with the below code.

import { Component } from '@angular/core';    @Component({    selector: 'app-root',    templateUrl: './app.component.html',    styleUrls: ['./app.component.css']  })  export class AppComponent {    title = 'Csharp Corner';  }

Now open the browser, you can see that the web page has been updated with new welcome message “Welcome to Csharp Corner!”

Image

In this article we learned about the new features of Angular 6.0. We have installed the Angular 6.0 CLI and created our first Angular 6.0 application with the help of Visual Studio Code. We have also customized the welcome message on the webpage.

You can also find this article at C# Corner.

You can check my other articles on Angular here

Originally published at https://ankitsharmablogs.com/

]]>