Angular is one of the three most popular frameworks for front-end development, alongside React and Vue.js. The latest version is Angular 8 which was released on May 28, 2019.

There are many new features and enhancements to both the command-line interface and the framework itself which result in a performance-boost and smaller production bundles. One interesting feature is the ng deploy command which allows developers to quickly build and deploy their Angular apps to popular hosting providers such as Firebase or GitHub.

In this tutorial, we’ll take you step by step on a journey to build an example Angular application from scratch that uses many Angular APIs such as HttpClient, and Material Design.

Here are a few things we'll learn:

• How to mock a REST API server that uses fake data from a JSON file
• How to consume the REST API from our Angular 8 application using Httplient
• How to handle HTTP errors using the RxJS throwError() and catchError() operators
• How to retry failed HTTP requests in poor network conditions and cancel pending requests using the RxJS retry() and takeUntil() operators
• How to create and make use of Angular components and services
• How to set up routing and Angular Material in our project and create a professional-looking UI with Material Design components
• And finally, we’ll learn how to deploy the application to Firebase using the ng deploy command available in Angular 8.3+.

You’ll also learn by example:

• How to quickly mock a REST API with real-world features, such as pagination, that you can consume from your app before you can switch to a real backend when it’s ready.
• How to set up Angular CLI
• How to initialize your Angular 8 project
• How to set up Angular Material
• How to add Angular components and routing
• How to generate and use Angular services
• How to consume REST APIs with Angular HttpClient
• How to build and deploy your Angular application to Firebase.

This tutorial is divided into the following steps:

• Step 1 — Installing Angular CLI 8
• Step 2 — Creating your Angular 8 Project
• Step 3 — Adding Angular HttpClient
• Step 4 — Creating Components
• Step 5 — Adding Routing
• Step 6 — Building the UI with Angular Material Components
• Step 7 — Mocking a REST API
• Step 8 — Consuming the REST API with Angular HttpClient
• Step 9 — Handling HTTP Errors
• Step 10 — Adding Pagination
• Step 11 — Building and Deploying your Angular Application to Firebase

Now, let’s get started with the prerequisites!

Note: you can download our Angular 8 Book: Build your first web apps with Angular 8 for free.

Prerequisites

If you want to follow this tutorial, you’ll need to have:

• Prior knowledge of TypeScript.
• A development machine with Node 8.9+ and NPM 5.5.1+ installed. Node is required by the Angular CLI. You can head to the official website and grab the binaries for your system. You can also use NVM — Node Version Manager — a POSIX-compliant bash script to install and manage multiple Node.js versions in your machine.

If you are ready, let’s learn by example how to build an Angular 8 application that consumes a REST API using HttpClient. We'll implement real-world features like error handling and retrying failed HTTP requests.

Step 1 — Installing Angular CLI 8

Let’s start with the first step, where we’ll install the latest version of Angular CLI.

Angular CLI is the official tool for initializing and working with Angular projects. Head to a new terminal and execute the following command:

$ npm install -g @angular/cli

When writing this tutorial, angular/cli v8.3.2 is installed on our system.

That’s it, you are ready for the second step!

Step 2 — Creating your Angular 8 Project

In this step, we’ll use Angular CLI to initialize our Angular project.

Go to your terminal and execute these commands:

$ cd ~  
$ ng new angular-example

The CLI will prompt you and ask whether you would like to add Angular routing. Say Yes. It'll then ask which stylesheet format you would like to use. Choose CSS.

Angular CLI will generate the required files and folders, install the packages from npm, and even automatically set up routing in our project.

Now, go to your project’s root folder and run the local development server using these commands:

$ cd angular-example  
$ ng serve

Your Angular web application will be available from the [http://localhost:4200/](http://localhost:4200/) address.

Open a web browser and go to the http://localhost:4200/ address. You should see this beautiful page (Starting with Angular 8.3+):

You need to leave the development server running and open a new terminal for the next steps.

You are now ready for the third step!

Step 3 — Adding Angular HttpClient

In this step, we’ll add HttpClient to our example project.

Open the src/app/app.module.ts file and make the following changes:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

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

We simply imported HttpClientModule and included it in the imports array.

That’s all - now we can use the HttpClient service in our Angular project to consume our REST API.

You are ready for the fifth step!

Step 4 — Creating UI Components

Angular apps are made up of components. In this step, we’ll learn how to create a couple of Angular components that compose our UI.

Open a new terminal and run the following command:

$ cd ~/angular-example  
$ ng g component home

You’ll get the following output in your terminal:

CREATE src/app/home/home.component.html (19 bytes)  
CREATE src/app/home/home.component.spec.ts (614 bytes)  
CREATE src/app/home/home.component.ts (261 bytes)  
CREATE src/app/home/home.component.css (0 bytes)  
UPDATE src/app/app.module.ts (467 bytes)

We have four files, all required by our component.

Next, generate the about component:

$ ng g component about

Next, open the src/app/about/about.component.html file and add the following code:

<p style="padding: 15px;"> This is the about page that describes your app</p>

You are ready for the sixth step!

Step 5 — Adding Routing

In this step, we’ll learn how to add routing to our example.

Go to the src/app/app-routing.module.ts file and add the following routes:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';


const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

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

We imported the Angular components and we declared three routes.

The first route is for redirecting the empty path to the home component, so we’ll be automatically redirected to the home page when we first visit the app.

That’s it. Now that you have added routing, you are ready for the next step!

Step 6 — Adding Angular Material

In this tutorial step, we’ll learn to set up Angular Material in our project and build our application UI using Material components.

Go to your terminal and run this command from the root of your project:

$ ng add @angular/material

You’ll be prompted to choose the theme, so let’s pick Indigo/Pink.

For the other questions - whether you want to set up HammerJS for gesture recognition and if you want to set up browser animations for Angular Material - press Enter to use the default answers.

Open the src/app/app.module.ts file and add the following imports:

import { MatToolbarModule,
  MatIconModule,
  MatCardModule,
  MatButtonModule,
  MatProgressSpinnerModule } from '@angular/material';

We imported the modules for these Material Design components:

• MatToolbar that provides a container for headers, titles, or actions.
• MatCard that provides a content container for text, photos, and actions in the context of a single subject.
• MatButton that provides a native <button> or <a> element enhanced with Material Design styling and ink ripples.
• MatProgressSpinner that provides a circular indicator of progress and activity.

Next, add these modules to the imports array:

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatCardModule,
    MatProgressSpinnerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Next, open the src/app/app.component.html file and update it as follows:

<mat-toolbar color="primary">  
<h1>  
My Angular Store  
</h1>  
<button mat-button routerLink="/">Home</button>  
<button mat-button routerLink="/about">About</button></mat-toolbar><router-outlet></router-outlet>

We added a top navigation bar with two buttons that take us to the home and about pages, respectively.

Step 7 — Mocking a REST API

Go to a new command-line interface and start by installing json-server from npm in your project:

$ cd ~/angular-example
$ npm install --save json-server

Next, create a server folder in the root folder of your Angular project:

$ mkdir server
$ cd server

In the server folder, create a database.json file and add the following JSON object:

{
    "products": []
}

This JSON file will act as a database for your REST API server. You can simply add some data to be served by your REST API or use Faker.js for automatically generating massive amounts of realistic fake data.

Go back to your command-line, navigate back from the server folder, and install Faker.js from npm using the following command:

$ cd ..
$ npm install faker --save

At the time of creating this example, faker v4.1.0 will be installed.

Now, create a generate.js file and add the following code:

var faker = require('faker');

var database = { products: []};

for (var i = 1; i<= 300; i++) {
  database.products.push({
    id: i,
    name: faker.commerce.productName(),
    description: faker.lorem.sentences(),
    price: faker.commerce.price(),
    imageUrl: "https://source.unsplash.com/1600x900/?product",
    quantity: faker.random.number()
  });
}

console.log(JSON.stringify(database));

We first imported faker, and next we defined an object with one empty array for products. Next, we entered a for loop to create 300 fake entries using faker methods like faker.commerce.productName() for generating product names. Check all the available methods. Finally we converted the database object to a string and logged it to standard output.

Next, add the generate and server scripts to the package.json file:

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "generate": "node ./server/generate.js > ./server/database.json",
    "server": "json-server --watch ./server/database.json"
  },

Next, head back to your command-line interface and run the generate script using the following command:

$ npm run generate

Finally, run the REST API server by executing the following command:

$ npm run server

You can now send HTTP requests to the server just like any typical REST API server. Your server will be available from the http://localhost:3000/ address.

These are the API endpoints we'll be able to use via our JSON REST API server:

• GET /products for getting the products
• GET /products/<id> for getting a single product by id
• POST /products for creating a new product
• PUT /products/<id> for updating a product by id
• PATCH /products/<id> for partially updating a product by id
• DELETE /products/<id> for deleting a product by id

You can use _page and _limit parameters to get paginated data. In the Link header you'll get first, prev, next and last links.

Leave the JSON REST API server running and open a new command-line interface for typing the commands of the next steps.

Step 8 — Creating a Service for Consuming the REST API with Angular HttpClient

In this step, we’ll learn how to consume our REST API from Angular using HttpClient.

We’ll need to create an Angular service for encapsulating the code that allows us to consume data from our REST API server.

Go to your terminal and run the following command:

$ ng g service api

Next, go to the src/app/api.service.ts file, import and inject HttpClient:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  private SERVER_URL = "http://localhost:3000";

  constructor(private httpClient: HttpClient) { }
}

We imported and injected the HttpClient service and defined the SERVER_URL variable that contains the address of our REST API server.

Next, define a get() method that sends a GET request to the REST API endpoint:

import { Injectable } from '@angular/core';  
import { HttpClient } from '@angular/common/http';

@Injectable({  
    providedIn: 'root'  
})  
export class ApiService {

    private SERVER_URL = "http://localhost:3000";
    constructor(private httpClient: HttpClient) { }

    public get(){  
        return this.httpClient.get(this.SERVER_URL);  
    }  
}

The method simply invokes the get() method of HttpClient to send GET requests to the REST API server.

Next, we now need to use this service in our home component. Open the src/app/home/home.component.ts file, and import and inject the data service as follows:

import { Component, OnInit } from '@angular/core';  
import { ApiService } from '../api.service';

@Component({  
    selector: 'app-home',  
    templateUrl: './home.component.html',  
    styleUrls: ['./home.component.css']  
})  
export class HomeComponent implements OnInit {
    products = [];
    constructor(private apiService: ApiService) { }
    ngOnInit() {
        this.apiService.get().subscribe((data: any[])=>{  
            console.log(data);  
            this.products = data;  
        })  
    }
}

We imported and injected ApiService. Next, we defined a products variable and called the get() method of the service for fetching data from the JSON REST API server.

Next, open the src/app/home/home.component.html file and update it as follows:

<div style="padding: 13px;">
    <mat-spinner *ngIf="products.length === 0"></mat-spinner>

    <mat-card *ngFor="let product of products" style="margin-top:10px;">
        <mat-card-header>
            <mat-card-title>{{product.name}}</mat-card-title>
            <mat-card-subtitle>{{product.price}} $/ {{product.quantity}}
            </mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
            <p>
                {{product.description}}
            </p>
            <img style="height:100%; width: 100%;" src="{{ product.imageUrl }}" />
        </mat-card-content>
        <mat-card-actions>
      <button mat-button> Buy product</button>
    </mat-card-actions>
    </mat-card>
</div>

We used the <mat-spinner> component for showing a loading spinner when the length of the products array equals zero, that is before any data is received from the REST API server.

Next, we iterated over the products array and used a Material card to display the name, price, quantity, description and image of each product.

This is a screenshot of the home page after JSON data is fetched:

Next, we’ll see how to add error handling to our service.

Step 9 — Adding Error Handling

In this step, we’ll learn to add error handling in our example.

Go to the src/app/api.service.ts file and update it as follows:

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from "@angular/common/http";

import {  throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class ApiService {

  private SERVER_URL = "http://localhost:3000/products";

  constructor(private httpClient: HttpClient) { }

  handleError(error: HttpErrorResponse) {
    let errorMessage = 'Unknown error!';
    if (error.error instanceof ErrorEvent) {
      // Client-side errors
      errorMessage = `Error: ${error.error.message}`;
    } else {
      // Server-side errors
      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
    }
    window.alert(errorMessage);
    return throwError(errorMessage);
  }

  public sendGetRequest(){
    return this.httpClient.get(this.SERVER_URL).pipe(catchError(this.handleError));
  }
}

This is a screenshot of an example error on the browser console:

In the next step, we’ll see how to add pagination to our application

Step 10 — Adding Pagination

In this step, we’ll learn to add support for data pagination using the Link header of the HTTP response received from the REST API server.

By default, HttpClient provides only the response body. But in our app we need to parse the Link header for extracting pagination links. So we need to instructHttpClient to give us the full HttpResponse using the observe option.

The Link header in HTTP allows the server to point an interested client to another resource containing metadata about the requested resource. Wikipedia

Open the src/app/data.service.ts file and import the RxJS tap() operator:

import { retry, catchError, tap } from 'rxjs/operators';

Next, add these variables:

public first: string = "";  
public prev: string = "";  
public next: string = "";  
public last: string = "";

Next, add the parseLinkHeader() method that will be used to parse the Link header and populates the previous variables:

  parseLinkHeader(header) {
    if (header.length == 0) {
      return ;
    }

    let parts = header.split(',');
    var links = {};
    parts.forEach( p => {
      let section = p.split(';');
      var url = section[0].replace(/<(.*)>/, '$1').trim();
      var name = section[1].replace(/rel="(.*)"/, '$1').trim();
      links[name] = url;

    });

    this.first  = links["first"];
    this.last   = links["last"];
    this.prev   = links["prev"];
    this.next   = links["next"]; 
  }

Next, update the sendGetRequest() as follows:

  public sendGetRequest(){
    // Add safe, URL encoded _page and _limit parameters 

    return this.httpClient.get(this.SERVER_URL, {  params: new HttpParams({fromString: "_page=1&_limit=20"}), observe: "response"}).pipe(retry(3), catchError(this.handleError), tap(res => {
      console.log(res.headers.get('Link'));
      this.parseLinkHeader(res.headers.get('Link'));
    }));
  }

We added the observe option with the response value in the options parameter of the get() method so we can have the full HTTP response with headers. Next, we use the RxJS tap() operator for parsing the Link header before returning the final Observable.

Since the sendGetRequest() is now returning an Observable with a full HTTP response, we need to update the home component so open the src/app/home/home.component.ts file and import HttpResponse as follows:

import { HttpResponse } from '@angular/common/http';

Next, update the subscribe() method as follows:

ngOnInit(){

this.apiService.sendGetRequest().pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse<any>)=>{  
    console.log(res);  
    this.products = res.body;  
})  
}

We can now access the data from the body object of the received HTTP response.

Next, go back to the src/app/data.service.ts file and add the following method:

public sendGetRequestToUrl(url: string){  
    return this.httpClient.get(url, { observe: "response"}).pipe(retry(3),             
    catchError(this.handleError), tap(res => {  
        console.log(res.headers.get('Link'));  
        this.parseLinkHeader(res.headers.get('Link'));
    }));  
}

This method is similar to sendGetRequest() except that it takes the URL to which we need to send an HTTP GET request.

Go back to the src/app/home/home.component.ts file and add define the following methods:

 public firstPage() {
    this.products = [];
    this.apiService.sendGetRequestToUrl(this.apiService.first).pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse<any>) => {
      console.log(res);
      this.products = res.body;
    })
  }
  public previousPage() {

    if (this.apiService.prev !== undefined && this.apiService.prev !== '') {
      this.products = [];
      this.apiService.sendGetRequestToUrl(this.apiService.prev).pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse<any>) => {
        console.log(res);
        this.products = res.body;
      })
    }

  }
  public nextPage() {
    if (this.apiService.next !== undefined && this.apiService.next !== '') {
      this.products = [];
      this.apiService.sendGetRequestToUrl(this.apiService.next).pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse<any>) => {
        console.log(res);
        this.products = res.body;
      })
    }
  }
  public lastPage() {
    this.products = [];
    this.apiService.sendGetRequestToUrl(this.apiService.last).pipe(takeUntil(this.destroy$)).subscribe((res: HttpResponse<any>) => {
      console.log(res);
      this.products = res.body;
    })
  }

Finally, open the src/app/home/home.component.html file and update the template as follows:

<div style="padding: 13px;">
    <mat-spinner *ngIf="products.length === 0"></mat-spinner>

    <mat-card *ngFor="let product of products" style="margin-top:10px;">
        <mat-card-header>
            <mat-card-title>#{{product.id}} {{product.name}}</mat-card-title>
            <mat-card-subtitle>{{product.price}} $/ {{product.quantity}}
            </mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
            <p>
                {{product.description}}
            </p>
            <img style="height:100%; width: 100%;" src="{{ product.imageUrl }}" />
        </mat-card-content>
        <mat-card-actions>
      <button mat-button> Buy product</button>
    </mat-card-actions>
    </mat-card>

</div>
<div>
    <button (click) ="firstPage()" mat-button> First</button>
    <button (click) ="previousPage()" mat-button> Previous</button>
    <button (click) ="nextPage()" mat-button> Next</button>
    <button (click) ="lastPage()" mat-button> Last</button>
</div>

This is a screenshot of our application:

Step 11 — Building and Deploying your Angular Application to Firebase

Head back to your command-line interface. Make sure you are inside the root folder of your Angular project and run the following command:

$ ng add @angular/fire

This will add the Firebase deployment capability to your project.

As the time of writing this tutorial, @angular/fire v5.2.1 will be installed.

The command will also update the package.json of our project by adding this section:

        "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {}
        }

The CLI will prompt you to Paste authorization code here: and will open your default web browser and ask you to give Firebase CLI permissions to administer your Firebase account.

After you sign in with the Google account associated with your Firebase account, you'll be given the authorization code.

Next, you'll be prompted to Please select a project: (Use arrow keys or type to search). You should have created a Firebase project before.

The CLI will create the firebase.json and .firebaserc files and update the angular.json file accordingly.

Next, deploy your application to Firebase using the following command:

$ ng deploy

The command will produce an optimized build of your application (equivalent to the ng deploy --prod command). It will upload the production assets to Firebase hosting.

Conclusion

Throughout this step by step tutorial, you learned to build an Angular application from scratch using the latest Angular 8.3+ version.

You learned to mock a REST API backend for your Angular application with nearly zero lines of code.

You learned how to create a project using Angular CLI, add HttpClient and Angular Material for sending HTTP requests to your mocked REST API backend, and style the UI with Material Design components.

Finally, you learned to deploy your Angular application to Firebase using the ng deploy command available starting from Angular 8.3+.

Check out our other Angular tutorials.

You can reach out to or follow the author via his:

• Personal website
• Twitter
• LinkedIn
• Github

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.

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.

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.

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.

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.

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.

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.

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.

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 { }

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.

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.

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; }
}

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; }
}

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

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.

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.

The @ViewChild and @ViewChildren decorators in Angular provide a way to access and manipulate DOM elements, directives and components. In this tutorial, we'll see an Angular 8 example of how to use the two decorators.

You can use ViewChild if you need to query one element from the DOM and ViewChildren for multiple elements.

We'll be using an online development IDE available from https://stackblitz.com/ so you don't need to set up your local development machine for Angular at this point.

Head over to Stackblitz, sign in with your GitHub account and choose an Angular workspace:

You should be presented with an online IDE with an Angular 8 project

Our Angular project contains the usual App component and a child component called HelloComponent and defined in the src/app/hello.component.ts file with the following code:

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

@Component({
  selector: 'hello',
  template: `<h1>Hello !</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;
}

The component accepts a name property and uses an inline template which simply displays the value passed via the name property from the parent component.

In the component decorator, we used hello as the selector for the component so in the the HTML template of the App component defined in the src/app/app.component.htmlfile, we include the child component using the following code:

<hello name=""></hello>
<p>
  Start editing to see some magic happen :)
</p>

After running our Angular application the hello component is rendered and becomes part of the DOM so we can query it just like any normal DOM element.

What's ViewChild in Angular?

ViewChild is a decorator that creates a view or DOM query. According to the docs

A property decorator that configures a view query. The change detector looks for the first element or the directive matching the selector in the view DOM. If the view DOM changes, and a new child matches the selector, the property is updated.

The decorator takes the following meta information:

• selector - the selector of the element to query. This can be a directive type or a name.
• read - read a different token from the queried elements.
• static - This is new in Angular 8 and indicates whether or not to resolve query results before change detection runs.

ViewChild can take the following selectors:

• Classes with the @Component or @Directive decorators i.e components and directives,
• Template reference variables,
• Providers,
• TemplateRef

Now, let's go back to our src/app/app.component.ts file and let's see how we can query the child component using ViewChild. First, change the code accordingly:

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

import { HelloComponent } from './hello.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  name = 'Angular';
  @ViewChild(HelloComponent, {static: false}) hello: HelloComponent;

  ngAfterViewInit() {
    console.log('Hello ', this.hello.name); 
  }
}

In the console, you should get Hello Angular:

Now, let's explain the code.

First, we imported HelloComponent and ViewChild and AfterViewInit from the @angular/core package:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { HelloComponent } from './hello.component';

Next, we create a query called hello that takes HelloComponent as the selector and has static equals to false:

@ViewChild(HelloComponent, {static: false}) hello: HelloComponent;

In Angular 8, timing for ContentChild and ViewChild needs to be specified explicitly.

See: ​Why do I have to specify {static: false}? Isn't that the default?

Next, in the ngAfterViewInit() life-cycle hook, we can use the query to access the DOM element for the hello component. In our example, we accessed the name property of the component, after it's mounted in the DOM, which contains the Angular string:

  ngAfterViewInit() {
    console.log('Hello ', this.hello.name); 
  }

We can access any properties and even methods from the queried component.

Note: View queries are set before the ngAfterViewInit callback is called.

Querying Standard HTML Elements with Template References

We can also query standard HTML elements using ViewChild and template reference variables. Let's go back to our src/app/app.component.html file and change it as follows:

<hello name=""></hello>

<p #pRef>
  Start editing to see some magic happen :)
</p>

We simply added the helloRef template reference to our hello component. Now let's change our code to access the component using its reference. Go back to the src/app/app.component.ts file and change accordingly:

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

import { HelloComponent } from './hello.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  name = 'Angular';
  @ViewChild(HelloComponent, {static: false}) hello: HelloComponent;

  @ViewChild('pRef', {static: false}) pRef: ElementRef;

    ngAfterViewInit() {
    console.log(this.pRef.nativeElement.innerHTML); 
    this.pRef.nativeElement.innerHTML = "DOM updated successfully!!!"; 
  }
}

We import ElementRef and we create a query configuration to access the <p> DOM element with the #pRef template reference as follows:

  @ViewChild('pRef', {static: false}) pRef: ElementRef;

Next, in the ngAfterViewInit() method we can access and modify the native DOM element using the nativeElement object of ElementRef:

  @ViewChild('pRef', {static: false}) pRef: ElementRef;

    ngAfterViewInit() {
    console.log(this.pRef.nativeElement.innerHTML);
    this.pRef.nativeElement.innerHTML = "DOM updated successfully!!!"; 
  }

This is the live example from this link.

What's ViewChildren in Angular?

ViewChildren is another property decorator which is used to query the DOM for multiple elements and return a QueryList.

According to the docs:

You can use ViewChildren to get the QueryList of elements or directives from the view DOM. Any time a child element is added, removed, or moved, the query list will be updated, and the changes observable of the query list will emit a new value.

Let's see an example.

Go to the src/app/app.component.html file and update it as follows:

<hello  name="Angular 6"  ></hello>
<hello  name="Angular 7"  ></hello>
<hello  name="Angular 8"  ></hello>

We are simply diplsaying the hello component three times. Let's now query the DOM. Open the src/app/app.component.ts file and change it as follows:

import { Component, ViewChildren, AfterViewInit, QueryList } from '@angular/core';

import { HelloComponent } from './hello.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  name = 'Angular';
  @ViewChildren(HelloComponent) hellos: QueryList<any>;

  ngAfterViewInit() {

     this.hellos.forEach(hello => console.log(hello));

  }
}

You should this output in the console:

Now, let's explain the code.

First we import ViewChildren, AfterViewInit and QueryList from @angular/core package.

Next, we create a query configuration for accessing multiple DOM elements:

@ViewChildren(HelloComponent) hellos: QueryList<any>;

@ViewChildren returns a QueryList which stores a list of items. When the state changes Angular will automatically update this query list.

Finally, in the ngAfterViewInit() method, we can iterate over the query list and log each DOM element:

  ngAfterViewInit() {
     this.hellos.forEach(hello => console.log(hello));
  }

You can find the live example from this link.

Conclusions

In this tutorial, we've seen how we can access and modify the DOM in Angular 8 using ViewChild and ViewChildren decorators and a couple of other APIs like QueryListand ngAfterViewInit()

This post was originally posted in techiediaries.