DEV Community: Jay

Working with Angular Local Storage

Jay — Tue, 10 May 2022 16:10:42 +0000

Storage means a space for putting things for future use. From a web application perspective, storage can be broadly classified into two types: server-side storage and client-side storage. Server-side storage points to the many different types of database storage like SQL, MYSQL, MongoDB, etc. Client-side storage means storing data in the browser itself so that it can be used when required without requesting the server-side database.

In this article, we'll discuss local storage and its usage from an Angular application's perspective. Let's start by trying to understand what local storage is.

What is Local Storage?

Local storage is client-side storage for web applications. It stays there as long as it's not cleared—unlike session storage, which lasts for the current browser tab session. Local storage provides up to 5MB of storage, allocated separately for each domain. For example, local storage for the website www.abc.com will be different from www.xyz.com.

Working with Local Storage

The local storage API provides a couple of methods to store, retrieve, remove and clear the storage. Let's see how to use these methods.

localStorage.setItem

The setItem method allows you to add a value to the local storage. It stores data using a key value pair. For example:

localStorage.setItem('token','xhja787')

The above code stores the data xhja787 in a key called token inside the browser local storage.

Note: localStorage only stores string values. To store objects or arrays, you need to use JSON.stringify to convert them into a string first.

Now, let's see how to access the stored data using getItem

localStorage.getItem

getItem allows you to read back the data saved in local storage using the same key. For example, to fetch the data stored using the key token, you can use the following method:

localStorage.getItem('token')

localStorage.removeItem

Once you are done using the data in the local storage, you can remove it using the removeItem method. For example:

localStorage.removeItem('token')

localStorage.clear

You can clear all of the data out of the local storage using the clear method to wipe the slate clean.

localStorage.clear()

Now that's all plain JavaScript code to access the local storage. Using local storage in Angular is no different. First, let’s create an Angular application and then we'll create a service wrapper on top of the localStorage API.

Creating the Angular App

You can create the Angular app using the Angular CLI.

ng new local-app

Once you have the Angular app, you can create an Angular service using the following command:

ng g service local

Let's add four wrapper methods to add, get, remove and clear storage. Here is how the service looks:

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

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

  constructor() { }

  public saveData(key: string, value: string) {
    localStorage.setItem(key, value);
  }

  public getData(key: string) {
    return localStorage.getItem(key)
  }
  public removeData(key: string) {
    localStorage.removeItem(key);
  }

  public clearData() {
    localStorage.clear();
  }
}

You can use the local service by injecting the service into your component. In this Angular example, to use the LocalService in the app.component.ts file, you need to inject it by importing it in AppComponent and creating an instance in the constructor method.

import { Component } from '@angular/core';
import { LocalService } from './local.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private localStore: LocalService) {

  }
}

Local Storage Uses

Local storage can be used to store pretty much anything you like. It is most commonly used for storing JSON web tokens, user preferences and application settings such as themes.

How Secure is Local Storage?

When using local storage in Angular, the rule of thumb is to not store anything sensitive. Anything you store in local storage can be accessed by code in your browser. It's ok to store JSON web tokens since they’re already encrypted.

Another good rule of thumb is to encrypt the data before storing it in local storage and decrypt it when fetching from local storage. To encrypt and decrypt data in local storage, you can use a library such as crypto-js.

To use it, first install it in your Angular project using npm.

npm install crypto-js
npm i --save-dev @types/crypto-js

Once you have it installed, you can import the library in the LocalService.

import  *  as CryptoJS from  'crypto-js';

Add the following two methods to encrypt and decrypt text:

  private encrypt(txt: string): string {
    return CryptoJS.AES.encrypt(txt, this.key).toString();
  }

  private decrypt(txtToDecrypt: string) {
    return CryptoJS.AES.decrypt(txtToDecrypt, this.key).toString(CryptoJS.enc.Utf8);
  }

Now, you can use the above two methods to encrypt and decrypt before storing and fetching data from local storage.

  public saveData(key: string, value: string) {
    localStorage.setItem(key, this.encrypt(value));
  }

  public getData(key: string) {
    let data = localStorage.getItem(key)|| "";
    return this.decrypt(data);
  }

Here is how the complete local.service.ts file looks:

import { Injectable } from '@angular/core';
import * as CryptoJS from 'crypto-js';

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

  key = "123";

  constructor() { }

  public saveData(key: string, value: string) {
    localStorage.setItem(key, this.encrypt(value));
  }

  public getData(key: string) {
    let data = localStorage.getItem(key)|| "";
    return this.decrypt(data);
  }
  public removeData(key: string) {
    localStorage.removeItem(key);
  }

  public clearData() {
    localStorage.clear();
  }

  private encrypt(txt: string): string {
    return CryptoJS.AES.encrypt(txt, this.key).toString();
  }

  private decrypt(txtToDecrypt: string) {
    return CryptoJS.AES.decrypt(txtToDecrypt, this.key).toString(CryptoJS.enc.Utf8);
  }
}

Now, let's test this by storing some text in the local storage. In your app.component.ts file, import the LocalService and create an instance of it in the constructor. In ngOnInit, store the data in the local storage using the service method. Here is the app.component.ts file:

import { Component } from '@angular/core';
import { LocalService } from './local.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'local-app';
  constructor(private localStore: LocalService) {

  }

  ngOnInit(): void {
    this.localStore.saveData('id', 'jk123');
  }
}

Save the Angular app and run the application. After the app gets loaded, type in localStorage from the browser console and you will be able to see the encrypted data in local storage.

{
    "id": "U2FsdGVkX1+xovPDV0m0um6MPlrb+p5aG8Rb09TSWaM="
}

While trying to access the local storage data inside the application, you can get the decrypted data. For example, try to get the id data from local storage in ngOnInit.

  ngOnInit(): void {
    this.localStore.saveData('id', 'jk123');
    console.log('decrpted data ', this.localStore.getData('id'));
  }

You will be able to see the decrypted data in your browser console.

Wrapping it Up

In this tutorial, you learned about what localStorage is, how and when to use it, and how to encrypt and decrypt data on storing and fetching data respectively from localStorage.

We hope you liked this tutorial, and if you want to learn how you can secure your Angular source code against theft and reverse-engineering, be sure to check our guide.

Implementing Angular Lazy Loading

Jay — Mon, 29 Nov 2021 14:25:36 +0000

When your Angular application loads, all the application modules are loaded whether they’re required or not. Now, it may not sound like much of an issue if the application is a small one but as its modules eventually grow it will slow down the entire application.

The answer to this problem is found through Lazy loading which is the technique to initially load only the required modules and to load the other modules only when they are actually required.

From the official docs,

By default, NgModules are eagerly loaded, which means that as soon as the application loads, so do all the NgModules, whether or not they are immediately necessary. For large applications with lots of routes, consider lazy loading—a design pattern that loads NgModules as needed. Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times.

Advantages of Lazy loading

Lazy loading loads the resource as and when required, which results in:

Faster page loads
Better user experience
Bandwidth conservation

Now let's see the lazy loading in action.

Implementing Lazy Loading

Creating Angular app

Start by creating an Angular app using the Angular CLI.

ng new angular-app

Say yes to creating Angular routing and add the CSS stylesheet format.

Once the application is created, navigate to the project directory and run the application.

cd angular-app
npm start

You will be able to see the Angular app up and running.

Our application will have two modules, the Dashboard module, and the Home module. By default, you'll be loading the App module. The Home module and the Dashboard module will come into the picture when clicking the links in the App module.

Creating the Dashboard Module

From your application root directory, execute the following command to create the Dashboard module.

ng g module dashboard --routing

The above command creates the dashboard module. --routing option creates the routing configuration for the module. Once the module command is executed you can check the application src/app folder, it will contain a dashboard folder for the Dashboard module. Inside the folder there will also be a file called dashboard-routing.module for routing specific to the module.

Now navigate to the dashboard module folder and create a component for the module.

cd .\src\app\dashboard\
ng g component chart

Modify the dashboard-routing.module file by adding the default route for the module which points to the Chart component. Here is how the file looks:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ChartComponent } from './chart/chart.component';

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

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

Add the following HTML to the chart.component.html file.

<h4>
    Welcome Dashboard
</h4>

Creating the Home Module

Let's create the Home module. From the project root directory execute the following command:

ng g module home --routing

The above command creates the Home module with routing configuration.

Create a component inside the Home module by navigating to the Home module folder.

cd .\src\app\home\  
ng g component userHome

Modify the home-routing.module.ts file to set the default route to the UserHomeComponent. Here is the home-routing.module.ts file:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserHomeComponent } from './user-home/user-home.component';

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

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

Let's add the following HTML to the user-home.component.html file.

<h4>
    Welcome Home
</h4>

Add the following HTML to the app.component.html file:

<h2>
  Welcome to course !!
</h2>
<a [routerLink]="'home'">Go to Home</a>
<a [routerLink]="'dashboard'">Dashboard</a>
<router-outlet></router-outlet>

Without Lazy Loading

Add the component references to the app.module.ts file:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ChartComponent } from './dashboard/chart/chart.component';
import { UserHomeComponent } from './home/user-home/user-home.component';

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

Add the required routes to the app-routing.module.tsfile:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ChartComponent } from './dashboard/chart/chart.component';
import { UserHomeComponent } from './home/user-home/user-home.component';

const routes: Routes = [
  {path: 'dashboard', component: ChartComponent},
  {path: 'home',component : UserHomeComponent}
];

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

So as seen in the above Routes, a request to the /dashboard takes you to the ChartComponent in the DashboardModule and a request to the /home routes takes you to the UserHomeComponent.

Save the above changes and start the Angular application. On the default page, you'll be able to see two links to the home and to the dashboard respectively. If you click on either of the two links it takes you to the respective module.

If you check the console, you can see that the size of the main.js file is 15.4KB. That is all the component data that is being loaded. If you notice, we don't need the Dashboard module and the Home module on the initial load. You only need them once you click on their particular links.

Now let's see how to achieve that using lazy loading.

Lazy Loading

To lazy load the modules, go to the app-routing.module.ts file and use loadChildren. You don't need to import the module in the app-routing.module.ts but it will get imported dynamically during runtime.
Here is how the app-routing.module.ts file looks:

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

const routes: Routes = [
  {path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule)},
  {path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)}
];

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

Modify the app.module.ts to remove the Chart component and UserHome component imports.

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

Save the changes and load the application. Now if you check the browser console on initial load the size of main.js has been reduced to 11.4KB.

If you click on any of the links you can see that the respective module file is loaded on demand. Please check the file indicated in red. It wasn’t there in the initial load.

Conclusion

Lazy loading is an important Angular feature that helps to reduce the initial load time since it loads only the necessary files first. Other required modules are loaded on demand when you navigate to their particular route.

Now, you can take adavantage of this feature to improve your app's load time. And lastly, if you want to learn how you can secure your Angular source code against theft and reverse-engineering, be sure to check our guide.

The source code from this tutorial is available on GitHub.

Building an app with Angular & Firebase

Jay — Tue, 02 Nov 2021 18:07:39 +0000

Firebase is a service provided by Google where the back end is provided as a service for use in applications. Its database (Firebase Realtime Database) is a NoSQL database where data is stored in JSON like documents. In this tutorial, you'll learn how to build an Angular application using Firebase as backend. So, let's get started.

Setting up Firebase

Let's start by setting up Firebase by signing into the Firebase console.

Click on the Add project to create a new project.

You'll be prompted to enter a name for your project. We'll be naming our project js-scrambler-demo. Next, it'll ask you whether to enable Google Analytics for this project or not. We’ll disable it since it's not required for this tutorial and click on Create project.

Click on the continue button and you will be able to view the following screen.

Now since we are creating a web app, we’ll click on the web icon. It'll ask you to register an app. Enter an app name and click on register.

Once you click register app you will be able to see the Firebase app configurations.

We'll be using the above configurations in our Angular app to connect to the Firebase database.

Click on the Firestore Database link from the left side menu from the application home.

Click on the Create database button to create a new database in firestore. Once inside the Cloud firestore data tab, click on the Start collection button to create a new collection.

Enter the name of the collection as shown in the above screenshot. Click next to add a new document to the collection.

We are planning to have two fields to save the name and personal information of the user, hence the fields name and personalInfo.

Next, let's try to connect Firebase to the Angular app.

Connecting Angular to Firebase

Let's start by creating an Angular app using Angular CLI.

ng new angular-firebase

Install @angular/fire and firebase to the Angular project.

npm install firebase @angular/fire

Go to your Angular app, then on the app.module.ts file import the AngularFireModule and the AngularFirestoreModule.

import { AngularFireModule } from  '@angular/fire';
import { AngularFirestoreModule } from  '@angular/fire/firestore';

Using the AngularFireModule initializes the app using the configuration keys from the Firebase console. Here is how the app.module.ts file looks:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    AngularFireModule.initializeApp({
      apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      authDomain: "js-scrambler-demo-app.firebaseapp.com",
      projectId: "js-scrambler-demo-app",
      storageBucket: "js-scrambler-demo-app.appspot.com",
      messagingSenderId: "xxxxxxxxxx",
      appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxx"
    }),
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

From the app.component.ts file, import AngularFirestore and create an instance of it in the constructor method.

import { AngularFirestore } from  '@angular/fire/firestore';

constructor(private  store: AngularFirestore){}

Define a method called getAll to get all the collected data from Firebase.

  ngOnInit(){
    this.getAll();
  }

  getAll(){
    this.store.collection('userInfo').snapshotChanges().subscribe((response) => {
      console.log('reponse ', response);
    })
  }

As seen in the above method, we are subscribing to the collection's snapshot changes which gives us the full collection information. You can use the response to parse the collection information.

Save the above changes and run the application and you'll be able to get the collection userInfo details in the browser console. So, that means we are able to connect to the database. Now let's see how to implement basic CRUD operations on Firebase from Angular.

Adding Bootstrap to Angular

Install Bootstrap and the required dependencies to the Angular project.

npm install bootstrap jquery popper.js

Add the following to the script references to the angular.json file under architect -> build key.

"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Fetching the Data

So, we already fetched the data from the collection using the getAll method. But you need to parse the data and render it to the user interface.

Inside the app.component.ts file, define a variable called dataSource which we'll use to render the collection info in tabular form.

dataSource : any;

From the response received from the collection snapshotChanges you need to iterate over each data and collect the required info. You'll be requiring the unique document ID, name, and personal Info from each document. Each document's payload.doc has the required information which we can parse as shown,

  getAll(){
  this.store.collection('userInfo').snapshotChanges().subscribe((response) => {
      this.dataSource = response.map(item => 
        Object.assign({id : item.payload.doc.id}, item.payload.doc.data())
      );
    })
  }

Now once you have the data, let's render the data to the UI. For the rendering of the data add the following HTML to app.component.html.

<div class="container m-100 main">
  <div>
    <svg data-bs-toggle="modal" (click)="openDialog()" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-cloud-plus-fill" style="cursor: pointer;" viewBox="0 0 16 16">
      <path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm.5 4v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5 0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 1 0z"/>
    </svg>
  </div>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Personal Info</th>
        <th>

        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of dataSource; let i = index;">
        <th scope="row">{{i+1}}</th>
        <td>{{item.name}}</td>
        <td>{{item.personalInfo}}</td>
        <td class="action">
          <svg (click)="edit(item.id)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
            <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
          </svg>
          <svg (click)="delete(item.id)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
            <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
          </svg>
        </td>
      </tr>
    </tbody>
  </table>
</div>

As seen in the above code, we are iterating over the dataSource to render it in tabular form. Add the following CSS to the app.component.css file.

.m-100{
    margin: 100px;
}

.main{
    padding: 1.5rem;
    border: 1px solid #dee2e6;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

.action svg{
    margin: 0px 5px 0px 5px;
}

Save the changes and run the Angular application. You can add some data to the collection from the Firebase console and you should be able to see it in the Angular application.

Adding New Data

In the app.component.html code append the following HTML code to show an add/edit modal popup.

<button #btnShow style="display: none;" id="btnShow" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" ></button>

<div id="exampleModal" #myModal class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add New User</h5>
        <button #btnClose id="btnClose" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label for="exampleFormControlInput1" class="form-label">Name</label>
          <input type="text" [(ngModel)]="name" class="form-control" id="exampleFormControlInput1" placeholder="enter name">
        </div>
        <div class="mb-3">
          <label for="exampleFormControlTextarea1" class="form-label">Personal Info</label>
          <textarea class="form-control" [(ngModel)]="personalInfo" placeholder="enter some personal info" id="exampleFormControlTextarea1" rows="3"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button"  class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" (click)="add()" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Define name and personalInfo in app.component.ts. Create a method called add which will add a new document to the userInfo collection based on the data entered in the popup.

add(){
      this.store.collection('userInfo').add({name : this.name, personalInfo : this.personalInfo});
  }

Inside the app.component.ts add a reference to the buttons to open and close the popup using ViewChild. Also define two methods for opening and closing the modal popup using the button references.

@ViewChild('btnShow')
btnShow!: ElementRef;

@ViewChild('btnClose')
btnClose!: ElementRef;

openDialog(){
  this.btnShow.nativeElement.click();
}

closeDialog(){
  this.btnClose.nativeElement.click();
}

In the app.component.html file you have already added a click reference to the add method. Now go ahead and also add the closeDialog method call inside the add method to close popup after adding the document.

add(){
      this.store.collection('userInfo').add({name : this.name, personalInfo : this.personalInfo});
      this.closeDialog();
  }

Save the changes and click on the add icon to add a new record. You will be able to add a new record from the Add New User pop-up screen.

Updating Existing Record

For updating an existing record you need to have the unique document ID. So when the user clicks on the edit icon, let's keep the id and other details in a variable.

editObj : any;

Now let's define a method called edit and pass document ID to it. Using the ID let's fetch the document information and populate the popup.

  edit(id : string){
    this.store.collection('userInfo').doc(id).get().subscribe((response) => {
      this.editObj = Object.assign({id : response.id}, response.data());
      this.name = this.editObj.name;
      this.personalInfo = this.editObj.personalInfo;
      this.openDialog();
    })
  }

Save the changes and click on the edit icon of any existing record and the details will get populated.

Next, let's modify our add method to update in case of an existing record.

  add(){
    if(this.editObj){
      this.store.collection('userInfo').doc(this.editObj.id).update({name : this.name, personalInfo : this.personalInfo});
    } else {
      this.store.collection('userInfo').add({name : this.name, personalInfo : this.personalInfo});
    }
    this.closeDialog();
  }

As seen in the above code, if an editObj exists we update the particular document records, and if not we add a new one.

Save the changes and click on the edit icon to edit an icon. Make some changes and click save. You will be able to update the existing information to Firebase.

Add a clearEdit method to clear the editObj and reset variables. You can call it on the close button click.

clearEdit(){
  this.editObj = null;
  this.name = "";
  this.personalInfo = "";
}

Add the clearEdit method on the close button in app.component.html

<button  type="button"  (click)="clearEdit()"  class="btn btn-secondary"  data-bs-dismiss="modal">Close</button>

Deleting Record

For deleting a document from Firebase you need to call the delete method on a document fetched with a document ID. Here is how the delete method looks:

delete(id : string){
  this.store.collection('list').doc(id).delete();
}

The method call is already added in the app.component.htmlfile. Save the changes and click on the delete icon corresponding to a record and you will be able to delete an existing record.

Wrapping it Up

In this tutorial, you learned how to build a basic CRUD app using Angular and Firebase. For detailed information related to Firebase and its APIs, you can refer to the official documentation.
The source code from this tutorial is available on GitHub.

Lastly, if you want to learn how you can secure your Angular source code against theft and reverse-engineering, be sure to check our guide.

Working with Angular FormArray

Jay — Tue, 24 Aug 2021 14:47:05 +0000

Forms are an integral part of the web application development scheme, and there are many different ways we can use a form. For instance, you can have multiple forms on a page or you can have just a single form. Depending on the use case the form will have, it might even be required for the forms to be created dynamically. In this post, we’ll explore exactly this topic and go over the Angular FormArray in reactive forms.

What is an Angular FormArray?

In our previous blog post, you created Angular reactive forms using FormControl and FormGroups APIs. However, sometimes you might have the need to repeat a form multiple times dynamically based on how the user interacts with the user interface. Angular FormArray is a container that allows you to do that since it can be used to collect dynamically created controls.

Why do we need it?

FormArray provides a way to collect the dynamically created forms in one place. You can access each of the forms using the index and the controls inside it. Managing and validating the dynamically created forms’ data becomes easier, similar to the reactive forms.

Using Angular FormArray

Enough of the talking, now let's see how to use a FormArray in an Angular project.

Setting up the project

Assuming that you already have the Angular CLI installed, use it to create a new Angular project.

ng new form-array

Select the default options when prompted for whether to use routing and the stylesheets option.

Once you have the project created, navigate to the project directory and start the project.

cd form-array
npm start

You will have the project running at localhost:4200.

Adding Bootstrap

To style up the project let's add the bootstrap library using npm.

npm install bootstrap jquery popper.js

Once you have it installed, add the following dependencies to the angular.json file. Go to architect -> build -> options and add the following styles and scripts:

"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Now you should be able to use bootstrap. Let's add some HTML design to our app.

Add the following HTML to the app.component.html file:

<div class="container">
  <main class="main">
    <div class="row">
      <div class="col-md-12 col-lg-12">
        <h4 class="mb-3">Customer Information</h4>
        <form class="needs-validation" novalidate>
          <div class="row g-3">
            <div class="col-sm-6">
              <label for="firstName" class="form-label">First name</label>
              <input type="text" class="form-control" id="firstName" placeholder="First name" value="" required>
            </div>

            <div class="col-sm-6">
              <label for="lastName" class="form-label">Last name</label>
              <input type="text" class="form-control" id="lastName" placeholder="Last name" value="" required>
            </div>

            <div class="col-6">
              <label for="username" class="form-label">Username</label>
              <div class="input-group">
                <input type="text" class="form-control" id="username" placeholder="Username" required>
              </div>
            </div>

            <div class="col-sm-6">
              <label for="email" class="form-label">Email Address</label>
              <input type="email" class="form-control" id="email" placeholder="Email address" value="" required>
            </div>

          </div>


          <div class="card mt-2r">
            <div class="card-header ">
              <div class="header-container">
                <span class="product-header">
                  Add Product Information
                </span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                  class="bi bi-plus-square-fill" viewBox="0 0 16 16">
                  <path
                    d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z" />
                </svg>
              </div>


            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-12">

                  <ul class="list-group">
                    <li class="list-group-item">
                      <div class="row">
                        <div class="col-4">
                          <input type="text" class="form-control" id="firstName" placeholder="Product name" value=""
                            required>
                        </div>
                        <div class="col-6">
                          <input type="text" class="form-control" id="firstName" placeholder="Product description"
                            value="" required>
                        </div>
                        <div class="col-2">
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-trash-fill" viewBox="0 0 16 16">
                            <path
                              d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z" />
                          </svg>
                        </div>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <div class="row">
                        <div class="col-4">
                          <input type="text" class="form-control" id="firstName" placeholder="Product name" value=""
                            required>
                        </div>
                        <div class="col-6">
                          <input type="text" class="form-control" id="firstName" placeholder="Product description"
                            value="" required>
                        </div>
                        <div class="col-2">
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-trash-fill" viewBox="0 0 16 16">
                            <path
                              d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z" />
                          </svg>
                        </div>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <div class="row">
                        <div class="col-4">
                          <input type="text" class="form-control" id="firstName" placeholder="Product name" value=""
                            required>
                        </div>
                        <div class="col-6">
                          <input type="text" class="form-control" id="firstName" placeholder="Product description"
                            value="" required>
                        </div>
                        <div class="col-2">
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-trash-fill" viewBox="0 0 16 16">
                            <path
                              d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z" />
                          </svg>
                        </div>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <div class="row">
                        <div class="col-4">
                          <input type="text" class="form-control" id="firstName" placeholder="Product name" value=""
                            required>
                        </div>
                        <div class="col-6">
                          <input type="text" class="form-control" id="firstName" placeholder="Product description"
                            value="" required>
                        </div>
                        <div class="col-2">
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-trash-fill" viewBox="0 0 16 16">
                            <path
                              d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z" />
                          </svg>
                        </div>
                      </div>
                    </li>
                    <li class="list-group-item">
                      <div class="row">
                        <div class="col-4">
                          <input type="text" class="form-control" id="firstName" placeholder="Product name" value=""
                            required>
                        </div>
                        <div class="col-6">
                          <input type="text" class="form-control" id="firstName" placeholder="Product description"
                            value="" required>
                        </div>
                        <div class="col-2">
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-trash-fill" viewBox="0 0 16 16">
                            <path
                              d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z" />
                          </svg>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <button class="mt-20 w-100 btn btn-primary btn-lg" type="submit">Create Customer</button>
        </form>
      </div>
    </div>
  </main>

  <footer class="my-5 pt-5 text-muted text-center text-small">
    <p class="mb-1">&copy; 2017–2021 Company Name</p>
    <ul class="list-inline">
      <li class="list-inline-item"><a href="#">Privacy</a></li>
      <li class="list-inline-item"><a href="#">Terms</a></li>
      <li class="list-inline-item"><a href="#">Support</a></li>
    </ul>
  </footer>
</div>

Add the following CSS to the app.component.css file.

  .container {
    max-width: 960px;
  }

  .main{
      margin-top: 2rem;
  }

  .mt-20{
      margin-top: 20px;
  }

  .mt-2r{
      margin-top: 2rem;
  }

  .product-header{
      font-weight: 500;
  }
  .header-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

Save the changes and you will be able to view the following in your Angular app.

As you can see in the above screenshot, the product information block has multiple products added. That is where you'll be using the FormArray to create and manage multiple products.

Create Angular Reactive Forms

Let's start by importing ReactiveFormsModule in the app.module.ts file.

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

import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

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

Now go to your app.component.ts file and create a reactive form to manage the customer information.

Start by importing FormBuilder in the AppComponent.

import { FormBuilder } from  '@angular/forms';

Next, create an instance of FormBuilder in the constructor method.

constructor(private  formBuilder : FormBuilder){}

Implement a OnInit in the AppComponent and define a variable for the reactive form group. Here is how the app.component.ts file looks :

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

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

  customerInfo : FormGroup;

  constructor(private formBuilder : FormBuilder){}

  ngOnInit(){

  }
}

Let's initialize the customerInfo reactive form group.

  ngOnInit(){
    this.customerInfo = this.formBuilder.group({
      firstName : [],
      lastName : [],
      username : [],
      email : [],
      products : this.formBuilder.array([])
    })
  }

As seen in the above code, products is defined as a FormArray. Now let's bind the reactive form to the HTML in the app.component.html file.

Start by adding the formGroup directive to the form in the app.component.html file.

<form  [formGroup]="customerInfo"  class="needs-validation">
.......
.......
</form>

Next add the formControlName attribute to the respective input controls.

<div class="row g-3">
    <div class="col-sm-6">
        <label for="firstName" class="form-label">First name</label>
        <input type="text" formControlName="firstName" class="form-control" id="firstName" placeholder="First name" value="" required>
    </div>

    <div class="col-sm-6">
        <label for="lastName" class="form-label">Last name</label>
        <input type="text" formControlName="lastName" class="form-control" id="lastName" placeholder="Last name" value="" required>
    </div>

    <div class="col-6">
        <label for="username" class="form-label">Username</label>
        <div class="input-group">
            <input type="text" class="form-control" id="username" placeholder="Username" required>
        </div>
    </div>

    <div class="col-sm-6">
        <label for="email" class="form-label">Email Address</label>
        <input type="email" class="form-control" id="email" placeholder="Email address" value="" required>
    </div>

</div>

You need to iterate over the products form Array to bind to the HTML. You'll be using ngFor to iterate over the products form array controls. Here is how the ul element from the HTML code looks:

<ul class="list-group">
    <li class="list-group-item" formArrayName="products" *ngFor="let product of customerInfo.get('products')['controls']; let i = index;">
        <div [formGroupName]="i" class="row">
            <div class="col-4">
                <input type="text" formControlName="name" class="form-control" id="firstName" placeholder="Product name" value="" required>
            </div>
            <div class="col-6">
                <input type="text" formControlName="description" class="form-control" id="firstName" placeholder="Product description" value="" required>
            </div>
            <div class="col-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
                    <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z" />
                </svg>
            </div>
        </div>
    </li>
</ul>

As seen in the above code, you have assigned a couple of directives.

formArrayName="products" to denote the formArrayName from the reactive form customerInfo
[formGroupName]="i" to assign a form group to each set of product, which you have assigned as index.

Save the above changes and run the app. You'll be able to view the following screen.

Adding Items to Angular FormArray

Now let's see how to insert or add some data to the products form array. Add a click event to the plus icon HTML and define the same in the app.component.ts.

<svg (click)="addProduct()" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-plus-square-fill" viewBox="0 0 16 16">
    <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z" />
</svg>

Get a reference to the products formArray from customerInfo. Once you have the reference, you can push a formGroup each time a new entry is required in the products array. Here is how the addProduct method looks:

  addProduct(){
    let products = this.customerInfo.get('products') as FormArray;
    products.push(this.formBuilder.group({
      name : [],
      description : []
    }));
  }

Save the above changes and refresh the app. From the app click on the plus icon to add a new product. You'll be able to add a new entry to the products list.

Saving Angular FormArray Data

Add a click event to the create customer button.

<button  (click)="createCustomerInfo()"  class="mt-20 w-100 btn btn-primary btn-lg"  type="button">Create Customer</button>

Define the event in the app.component.ts file. You can access the complete value of the customerInfo as a JSON object.

  createCustomerInfo(){
    console.log('data is ', this.customerInfo.value);
  }

Save the changes and fill the form. Add some data to the products list also. Click on the create customer info button and you will be able to see the data in the browser console.

Prepopulate Angular FormArray From Existing Data

You saw how to create a form array and how to get the user entered data on the click of a button. You also will be required to populate the form array from some existing data. Let's have a look at how to achieve it.

Let's define a method called setDefaultData. Let's call the method once the form has been initialized inside ngOnInit.

  ngOnInit(){
    this.customerInfo = this.formBuilder.group({
      firstName : [],
      lastName : [],
      username : [],
      email : [],
      products : this.formBuilder.array([])
    })
    this.setDefaultData();
  }

From inside the setDefaultData method, you'll make a call to the addProduct.

  setDefaultData(){
    this.addProduct("tyre", "rubber material");
  }

Earlier you didn't pass anything for name and description. Let's modify the addProduct to pass parameters.

  addProduct(name = "", desc = ""){
    let products = this.customerInfo.get('products') as FormArray;
    products.push(this.formBuilder.group({
      name : [name],
      description : [desc]
    }));
  }

Save the above changes and refresh the application. On load you'll be able to see a default product entry in products.

Validating Angular FormArray

Let's have a look at how to validate the form array controls and show error messages.

First you need to add the required validators while creating a new product form group inside the addProduct method.

  addProduct(name = "", desc = ""){
    let products = this.customerInfo.get('products') as FormArray;
    products.push(this.formBuilder.group({
      name : [name, [Validators.required]],
      description : [desc, [Validators.required]]
    }));
  }

Now let's add a span element adjacent to the input control.

<span class="validation">* required</span>

Add the following CSS to the app.component.css file.

.validation{
  color: red;
}

Using the formGroup product check for errors and show the error span. Add the following ngIf directive to show the message conditionally when the field is empty.

<span  *ngIf="product.get('name').errors && product.get('name').hasError('required')"  class="validation">* required</span>

Here is the modified portion of the app.component.html.

<ul class="list-group">
    <li class="list-group-item" formArrayName="products" *ngFor="let product of customerInfo.get('products')['controls']; let i = index;">
        <div [formGroupName]="i" class="row">
            <div class="col-4">
                <input type="text" formControlName="name" class="form-control" id="firstName" placeholder="Product name" value="" required>
                <span *ngIf="product.get('name').errors && product.get('name').hasError('required')" class="validation">* required</span>
            </div>
            <div class="col-6">
                <input type="text" formControlName="description" class="form-control" id="firstName" placeholder="Product description" value="" required>
                <span *ngIf="product.get('description').errors && product.get('description').hasError('required')" class="validation">* required</span>

            </div>
            <div class="col-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
                    <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z" />
                </svg>
            </div>
        </div>
    </li>
</ul>

Save the above changes and load the app. Click the plus button to add a new entry and you will be able to see the validation message.

Wrapping It Up

In this tutorial, you learned how to use FormArray to add dynamic data to the Angular form. You also learned how to access that dynamic data and validate the Angular FormArray.

Lastly, if you want to learn how you can protect your Angular application, be sure to check our guide.

For detailed information on FormArray, do check out the official documentation.

Source code from this tutorial is available at GitHub.

Handling CPU-Intensive Work Using Web Workers In Angular

Jay — Fri, 07 Aug 2020 14:40:43 +0000

There are times when you have to handle CPU-intensive tasks in web applications. CPU-intensive tasks can be anything like a complex calculation or some logic with too many iterations. Such tasks tend to make the web browser hang or lag until the task completes.

Why does the browser hang?

JavaScript is single-threaded. Whatever code you have written, it's executed in a synchronous manner. So, if a task or a piece of code is taking time to complete, the browser freezes until it finishes. Only one thing is executed at a time on the single main thread.

Introduction to web workers

Web workers are great for making web applications fast. They make the application fast by running CPU-intensive tasks on a different thread other than the main thread.

Angular has added support for web workers in Angular version 8 and later. CLI support has been added to create web workers from the Angular CLI.

You can create a web worker by using the following CLI command:

ng g web-worker <worker-name>

From the official docs:

Web Workers are a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface.

The main thread and the worker thread communicate by posting messages to an event handler.

Creating the basic app skeleton

Assuming that you already have the Angular CLI installed, let's create an Angular app:

ng new ang-web-worker

Then, navigate to the app project folder and start the app:

cd ang-web-worker
npm start

You will have the web app running at localhost:4200.

Let's now create a task that updates a graph in 1-second intervals. It'll help in observing the performance improvement provided by the web worker.

For the sake of this tutorial, let's use ng2-nvd3 for creating a graph in Angular. We'll update the graph data in 1-second intervals. Along with the graph update, we'll add another task to create rectangles in the canvas using the main thread and also using the web worker.

Install the ng2-nvd3 module in the project:

npm install ng2-nvd3

Add NvD3Module to the AppModule in app.module.ts:

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

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

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

Now, let's add some code to the app.component.html file:

<div class="main">
  <div class="graph">
    <nvd3 [options]="options" [data]="data"></nvd3>
  </div>
  <div class="container">
    <div>
      <input type="button" (click)="handleButtonClick()" value="Main Thread Task" />
      <input type="button" (click)="handleWebWorkerProcess()" value="Web Worker Task" />
    </div>
    <div id="canContainer" class="canvasContainer">
    </div>
  </div>
</div>

Let's also modify the app.component.ts file. Here is how it looks:

import { Component,OnInit, ViewEncapsulation, ViewChild, ElementRef  } from '@angular/core';
declare let d3: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css', '../../node_modules/nvd3/build/nv.d3.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {

  title = 'nvd3-graph';
  options;
  data;

  constructor(){}

  ngOnInit() {
    this.initChart();
    setInterval(()=>{
      this.updateChart();
    }, 500)
  }

  initChart(){
    this.options = {
      chart: {
        type: 'discreteBarChart',
        height: 450,
        x: function(d){return d.label;},
        y: function(d){return d.value;},
        showValues: true,
        valueFormat: function(d){
          return d3.format(',.4f')(d);
        },
        duration: 500,
        xAxis: {
          axisLabel: 'X Axis'
        },
        yAxis: {
          axisLabel: 'Y Axis',
          axisLabelDistance: -10
        }
      }
    }
  }

  updateChart()
  {
    this.data = [
      {
        values: [
          {
            "label" : "A" ,
            "value" : Math.floor(Math.random() * 100)
          } ,
          {
            "label" : "B" ,
            "value" : Math.floor(Math.random() * 100)
          } ,
          {
            "label" : "C" ,
            "value" : Math.floor(Math.random() * 100)
          } ,
          {
            "label" : "D" ,
            "value" : Math.floor(Math.random() * 100)
          } ,
          {
            "label" : "E" ,
            "value" : Math.floor(Math.random() * 100)
          } ,
          {
            "label" : "F" ,
            "value" : Math.floor(Math.random() * 100)
          } ,
          {
            "label" : "G" ,
            "value" : Math.floor(Math.random() * 100)
          } ,
          {
            "label" : "H" ,
            "value" : Math.floor(Math.random() * 100)
          }
        ]
      }
    ];
  }

  handleButtonClick(){

  }

  handleWebWorkerProcess(){

  }

  clearCanvas(){
    let element = <HTMLCanvasElement> document.getElementById('canContainer');
    element.innerHTML = ''
  }

}

Make sure to modify the target in compilerOptions to es5 in tsconfig.json, or it might not work. Save the above changes and start the app.

npm start

You will have the Angular app running at localhost:4200 displaying a bar chart.

Processing the CPU-intensive task in the Main UI thread

As seen in the above screenshot, the app contains two buttons and both accomplish the same task - drawing on a canvas. One will make use of the main thread and the other will make use of a web worker.

Let's add the code to run the task in the main UI thread. Start by creating the canvas element in app.component.ts.

  createCanvas(){
    let canvas = document.createElement('canvas');
    canvas.setAttribute('width','700');
    canvas.setAttribute('height','500');
    return canvas;
  }

Once you have the context to the canvas, create 10x10px rectangles to fill the canvas, which is 700px by 500px.

Here is how the handleButtonClick handler looks:

  handleButtonClick(){
    this.clearCanvas();
    let canvas = this.createCanvas();
    document.getElementById('canContainer').append(canvas);
    let context = canvas.getContext("2d");
    context.beginPath();
    for(let x = 0; x < 691; x++){
      for(let y = 0; y < 491; y++){
        context.fillRect(x, y, 10, 10);
      }
    } 
  }

Save the above changes. You will notice that the graph is updating in frequent intervals. Upon clicking the Main Thread Task button, the UI hangs for a couple of seconds and then the graph update continues. That delay was caused due to the time-consuming canvas writing task.

Processing the CPU-intensive task in a web worker

Now, let's see how you can solve the UI lag issue caused by the CPU-intensive canvas writing task. Let's create a web worker in your Angular project using the following command:

ng g web-worker canvas

The above command creates a file called canvas.worker.ts. Here is how it looks:

/// <reference lib="webworker" />

addEventListener('message', ({ data }) => {
  const response = `worker response to ${data}`;
  postMessage(response);
});

Add the canvas code to the web worker:

/// <reference lib="webworker" />

addEventListener('message', ({ data }) => {
  let canvas = data.canvas;
  let context = canvas.getContext("2d");
  context.beginPath();
  for(let x = 0; x < 691; x++){
    for(let y = 0; y < 491; y++){
      context.fillRect(x, y, 10, 10);
    }
  }
});

Note: If you have a more powerful CPU and are unable to see the UI getting stuck, feel free to increase the x and y ranges from 691 and 491 respectively to a higher range.

For the web worker to write to the canvas, you need to make use of the OffscreenCanvas API. It decouples the canvas API and DOM and can be used in a web worker, unlike the canvas element.

Let's add the code to create a worker thread using the canvas.worker.ts file.

let  _worker = new  Worker("./canvas.worker", { type:  'module' });

Once you have the worker instance created, you need to attach an onmessage handler to the worker.

To get the worker started, you need to call the postMessage on _worker worker instance.

_worker.postMessage();

You need to pass the OffscreenCanvas to the worker thread. Let's create the canvas element and get an off-screen canvas.

let  canvas = this.createCanvas();
document.getElementById('canContainer').append(canvas);

You need to pass the off screen canvas to the worker thread.

let  offscreen = canvas.transferControlToOffscreen();
_worker.postMessage({canvas:  offscreen}, [offscreen]);

Here is how the complete handleWebWorkerProcess button event looks:

  handleWebWorkerProcess(){
    this.clearCanvas();
    let canvas = this.createCanvas();
    document.getElementById('canContainer').append(canvas);
    let offscreen = canvas.transferControlToOffscreen();
    let _worker = new Worker("./canvas.worker", { type: 'module' }); 
    _worker.onmessage = ({ data }) => {
        console.log(data);
    };
    _worker.postMessage({canvas: offscreen}, [offscreen]);
  }

Save the above changes and restart the app.

You should now see the graph updating at an interval of 500 ms. You can observe that clicking on the Main Thread Task button hangs the UI since it's running the task on the main thread.

However, clicking on the Web Worker Task button runs the task in another thread without hanging the UI.

You can find the source code from this tutorial on GitHub.

Wrapping It Up

In this tutorial, you learned how to handle CPU-intensive tasks using web workers in Angular.

Before web workers came into existence, running time-consuming tasks in the browser was a difficult thing. With web workers, you can run any long-running task in parallel without blocking the main UI thread.

What we discussed in this tutorial is just the tip of the iceberg. I recommend reading the official documentation to learn further about web workers.

Finally, don't forget to pay special attention if you're developing commercial Angular apps that contain sensitive logic. You can protect them against code theft, tampering, and reverse engineering by following this guide.

Creating a Secure Role-Based App Using Angular Route Guard

Jay — Wed, 06 May 2020 12:11:21 +0000

While creating a web app, setting up permissions based on roles is a common scenario. Some users may have permissions to certain pages or certain sections of the pages depending on their user role.

In this tutorial, you'll learn how to create a role-based app using Angular route guard. The source code from this tutorial is available at GitHub.

Setting Up the App

Let's start by setting up the Angular app. Assuming that you already have the Angular CLI installed, let's create a new Angular application.

ng new angular-role-app

The above command creates the basic boilerplate code for the Angular application. Navigate to the angular project folder and start the application.

cd angular-role-app
npm start

You will have the Angular app running at localhost:4200.

Creating Angular Modules

Here are the three sections of our Angular application and their permissions:

Administration section - accessible only by a superuser
Management section - accessible only by a manager
General section - accessible by any user

Let's create a module for each of the above sections. Create the Admin module by using the following Angular CLI command:

ng g module Administration --routing

Add two components to the administration module, admin and adminHome.

ng g component administration/admin
ng g component administration/adminHome

Let's also define the routing for the administration module as shown:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
import { AdminHomeComponent } from './admin-home/admin-home.component';

const routes: Routes = [
  { path: '', children :[
    { path : 'adminHome', component : AdminHomeComponent },
    { path : 'admin', component : AdminComponent },
    { path : '', redirectTo : 'admin', pathMatch : 'full' }
  ] }
];

@NgModule({
  declarations: [],
  imports: [RouterModule.forChild(routes)],
  exports : [RouterModule]
})
export class AdminRoutingModule { }

Similarly, create the management and general section module using the command below. (The --routing option creates the routing file for each of the consecutive modules.)

ng g module general --routing
ng g module management --routing

Create a dashboard component inside the general module.

ng g component general/dashboard

Define the routing for the general module as shown:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';

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

@NgModule({
  declarations: [],
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class GeneralRoutingModule { }

Create a component called “management” inside the management module.

ng g component management/management

Define the routing file for the management module as below:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ManagementComponent } from './management/management.component';

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

@NgModule({
  declarations: [],
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class ManagementRoutingModule { }

To enable the user to log in, let's also create a Login component.

ng g component login

Now you have the required modules and components ready, also define the routing module for the Angular application in the app-routing.module.ts file:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { 
    path: 'admin', 
    loadChildren: () => import('./administration/administration.module').then(m => m.AdministrationModule) 
  },
  { 
    path: 'general', 
    loadChildren: () => import('./general/general.module').then(m => m.GeneralModule) 
  },
  { 
    path: 'manage', 
    loadChildren: () => import('./management/management.module').then(m => m.ManagementModule) 
  },
  { path: '', redirectTo : 'login', pathMatch:'full' }
];

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

As seen in the above routing module routes, LoginComponent is the default component.

Let's implement the logic for the Login component which we'll use for securing our Angular application routes.

Implementing the Login Component

Let's start by implementing the Login component which will authenticate the user. For the sake of this tutorial, you'll be hard coding the authentication process inside the Login component. This login process is for demonstration purposes only and should not be used in production apps.

You'll be using Bootstrap for styling the HTML pages. Install it on the Angular app using the following command:

npm install bootstrap jquery

Once done with the dependency installation, add the following style and script to the angular.json file:

"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Also add the following HTML code to the login.component.html file:

<form class="form-signin">
    <img class="mb-4" src="/docs/4.4/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
    <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
    <label for="inputUsername" class="sr-only">Username</label>
    <input type="text" id="inputUsername" name="username" [(ngModel)]="username" class="form-control" placeholder="Username" required autofocus>
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" id="inputPassword" name="password" [(ngModel)]="password" class="form-control" placeholder="Password" required>

    <button class="btn btn-lg btn-primary btn-block" (click)="handleLoginClick()" type="button">Sign in</button>
  </form>

And add the following code to the login.component.ts file:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

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

  username;
  password;

  constructor(private http : HttpClient, private router : Router) { }

  ngOnInit(): void {

  }

  handleLoginClick(){
    if(this.username && this.password){
      this.authenticateUser(this.username);
    } else {
      alert('enter username and password');
    }

  }

  authenticateUser(userName){
    if(userName == "admin"){
      this.router.navigate(['/admin']);
    } else if(userName == "manager"){ 
      this.router.navigate(['/manage']);
    } else if(userName == "general"){
      this.router.navigate(['/general'])
    }
  }

}

Note: Authenticating using username as shown above is not a secure way of authentication. This is for demo purposes only. For more information on secure authentication, check this tutorial.

As seen in the authenticateUser method in login.component.ts, if the user role is admin, manager, or general user, he'll be redirected to the specific module.

Save the above changes and run the application. Try signing in as admin and you'll be redirected to the admin module.

Securing Routes Using Angular Route Guard

There is an issue with the above implementation. The routes are not secure. If you log in as a general user and try to access localhost:4200/admin, the route will display the admin module. So how can we secure the routes for unauthorized access?

First, you need to store the user information somewhere to identify the user. Let's keep the logged in user information in session storage.

Inside the authenticateUser method in login.component.ts, add the following line of code to keep the user information in session storage:

sessionStorage.setItem("user", userName);

Here is how the authenticateUser method looks:

  authenticateUser(userName){
    sessionStorage.setItem("user", userName);
    if(userName == "admin"){
      this.router.navigate(['/admin']);
    } else if(userName == "manager"){ 
      this.router.navigate(['/manage']);
    } else if(userName == "general"){
      this.router.navigate(['/general'])
    }
  }

Now, create a service called routeGuard using the Angular CLI command :

ng g service routeGuard

In this Angular service, you'll implement the Angular CanActivate guard interface to secure the Angular route.

Here is how the route-guard.service.ts file looks :

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class RouteGuardService implements CanActivate {

  constructor() { }

  public canActivate(route: ActivatedRouteSnapshot){
    return true;
  }
}

Add the above RouterGuardService to the routes defined in the app-routing.module.ts file's admin route.

{ 
    path: 'admin', 
    canActivate : [RouteGuardService],
    loadChildren: () => import('./administration/administration.module').then(m => m.AdministrationModule) 
}

Here is how the app-routing.module.ts file looks :

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RouteGuardService } from './route-guard.service';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { 
    path: 'admin', 
    canActivate : [RouteGuardService],
    loadChildren: () => import('./administration/administration.module').then(m => m.AdministrationModule) 
  },
  { 
    path: 'general', 
    loadChildren: () => import('./general/general.module').then(m => m.GeneralModule) 
  },
  { 
    path: 'manage', 
    loadChildren: () => import('./management/management.module').then(m => m.ManagementModule) 
  },
  { path: '', redirectTo : 'login', pathMatch:'full' }
];

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

The canActivate method in RouteGuardService returns true at the moment. Let's add the logic to only allow access to the admin route by admin users.

  public canActivate(route: ActivatedRouteSnapshot){
    let user = sessionStorage.getItem('user');
    if(user == 'admin'){
      return true;
    }
    return false;
  }

You can get the user information from the session storage and return true if the user is admin, else false.

Save the above changes and restart the Angular app. Log in as a general user and try to access the localhost:4200/admin/ route. You will be redirected to the Login page.

Similarly, using Angular guards you can secure any of the other routes.

Wrapping It Up

In this tutorial, you learned how to secure an Angular app route using route guards. Here, we only explored the Angular guards concept from a PoC point of view.

While implementing Angular guards, you can use other interfaces that Angular provides. To get an in-depth understanding, we recommend reading the Angular route guard's documentation.

And since we're talking about security, learn how you can obfuscate and protect the source code of your Angular apps by following our guide.

How To Build Authentication in Angular Using Node and Passport

Jay — Tue, 19 Nov 2019 15:47:22 +0000

In this tutorial, you'll learn how to build an authentication in your Node Angular app using Passport.js.

The tutorial assumes the reader to be familiar with creating a basic application using Angular and Node.js Express framework. You'll implement the Authentication using Passport on top of an Angular Sales Dashboard application covered in a previous tutorial.

The source code from this tutorial is available on GitHub.

Why Authentication?

Why do you need authentication? Well, adding some kind of authentication makes your application secure and prevents unauthorized access.

Authentication can be done with a username and password or it can be a One-Time Password (OTP) sent to your phone. Using existing user information from popular social networks such as Google, Facebook, etc. is another way to add authentication.

What is Passport.js?

Passport.js is a middleware that can be easily used in your Node.js application. It helps to authenticate using username and password, Facebook, GitHub, etc.

From the official documentation,

Passport is authentication middleware for Node.js. Extremely flexible and modular, Passport can be unobtrusively dropped into any Express-based web application. A comprehensive set of strategies support authentication using a username and password, Facebook, Twitter and more.

Getting Started

Let' start by cloning the source code of the Angular Sales Dashboard app from its GitHub repository.

git clone https://github.com/JscramblerBlog/angular_dashboard

Navigate to the project directory and install the required dependencies.

cd angular_dashboard
npm install

Once the dependencies have been installed, start the Angular application server.

npm start

You'll have the Angular application running on localhost:4200.

Setting Up Authentication API

To set up the authentication API, you need to create a Node project.

mkdir node-api
cd node-api
npm init

Enter the required details and you will have the Node project setup. Next, install the Express framework for creating the API.

npm install express --save

Once you have Express installed, create a file called app.js and add the following code to it:

const express = require('express');
const app = new express();

app.post('/authenticate', (req, res) => {
    res.status(200).json({"statusCode" : 200 ,"message" : "hello"});
});

app.listen(3000, () => {
    console.log('App running at 3000')
})

That's the basic Express server with an endpoint. You now need to add a custom middleware to the /authenticate route.

What is a Middleware?

A middleware is a function that can intercept a request. It has access to the request, response objects and a next function. This next function, when invoked, executes the next middleware.

Let's add a custom middleware to the route.

const auth = () => {
    return (req, res, next) => {
        next()
    }
}

app.post('/authenticate', auth() , (req, res) => {
    res.status(200).json({"statusCode" : 200 ,"message" : "hello"});
});

The auth custom middleware does nothing but invoke the next middleware by calling next. Inside the auth middleware, you'll authenticate the user using Passport.

To use Passport, you need to install both passport and passport-local.

npm install passport --save
npm install passport-local --save

You'll be using the passport-local strategy to authenticate the user login using a username and password.

Require both passport and passport-local in app.js.

const  passport  =  require('passport');
const  LocalStrategy  =  require('passport-local').Strategy;

Passport has a number of strategies when it comes to authentication. You'll be using the local strategy in this tutorial and so we need to define it as below.

passport.use(new LocalStrategy(
    function(username, password, done) {
        if(username === "admin" && password === "admin"){
            return done(null, username);
        } else {
            return done("unauthorized access", false);
        }
    }
));

The local strategy uses the username and password for authentication. For the sake of this tutorial, we have hardcoded the username and password check.

Before getting into the detailed code, let's have a look at how the Passport authentication executes.

A request is received at the authenticate route.
The custom middleware intercepts the request and makes the Passport authentication call.
On successful authentication, Passport stores the user data in the session.
On subsequent requests, Passport fetches the user data from the session for authentication.

Let's make the Passport authentication call inside the custom middleware auth.

const auth = () => {
    return (req, res, next) => {
        passport.authenticate('local', (error, user, info) => {
            if(error) res.status(400).json({"statusCode" : 200 ,"message" : error});
            req.login(user, function(error) {
                if (error) return next(error);
                next();
            });
        })(req, res, next);
    }
}

passport.authenticate invokes the passport-local strategy and, once authentication is done, the callback is invoked.

On successful authentication, Passport saves the user data in the session. For that to happen, you need to invoke req.login with the user object.

You also need to define the serialize and deserialize method to facilitate user data storage in the session and retrieving the data on subsequent requests.

passport.serializeUser(function(user, done) {
    if(user) done(null, user);
});

passport.deserializeUser(function(id, done) {
    done(null, id);
});

Let’s now install and use the body-parser middleware so that the app can parse the posted parameters.

npm install body-parser --save

To use Passport, you need to initialize it and use it as below.

app.use(passport.initialize());
app.use(passport.session());

To authenticate subsequent requests, you can define another middleware function. This function checks if the user data exists in the request. passport provides a method called req.isAuthenticaed which can be used to check if the user is authenticated.

Here is how the middleware function looks:

const isLoggedIn = (req, res, next) => {
    if(req.isAuthenticated()){
        return next()
    }
    return res.status(400).json({"statusCode" : 400, "message" : "not authenticated"})
}

You can use the above middleware on other routes as shown below:

app.get('/getData', isLoggedIn, (req, res) => {
    res.json("data")
})

Let's move on to adding the authentication to the Angular Dashboard app.

Authenticating the Angular App

To add authentication to the Angular dashboard app, you need to add routes to the Angular application. From the project directory, execute the following command:

ng generate module app-routing --flat --module=app

It should create the routing module. Open app-module.routing.ts and replace it with the following code:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  { path: 'home', component: AppComponent },
  { path: 'login', component : LoginComponent}
];

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

You'll be using two additional components in the Angular app called the login and root component. The LoginComponent will handle the login functionality and RootComponent will serve as the container for rendering different views.

ng generate component login
ng generate component root

Adding Route Guard To The Home Route

To authenticate the Angular route from any unauthorized access, you'll be adding a route guard. The guard uses an authorization service to check if the route access is authenticated.
Let's create an authorization service to check is access is authenticated.

ng generate service auth

The above command creates a service called auth.service.ts. Add the following code to it:

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


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

  constructor(private http : HttpClient) { }

  public isAuthenticated() : Boolean {
    let userData = localStorage.getItem('userInfo')
    if(userData && JSON.parse(userData)){
      return true;
    }
    return false;
  }

  public setUserInfo(user){
    localStorage.setItem('userInfo', JSON.stringify(user));
  }

  public validate(email, password) {
    return this.http.post('/api/authenticate', {'username' : email, 'password' : password}).toPromise()
  }
}

After validating the user login, AuthService saves the user information. It exposes a method called isAuthenticated which can be utilized by the AuthGuardService service to authenticate the route.

Let's create AuthGuardService.

ng generate service authGuard

Add the following code to the auth-guard.service.ts file.

import { Injectable } from '@angular/core';
import { CanActivate,Router } from '@angular/router';
import {AuthService} from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuardService implements CanActivate {

  constructor(private authService : AuthService, private route : Router) { }

  canActivate(){
    if(this.authService.isAuthenticated()){
      return true;
    }
    this.route.navigate(['login']);
    return false;
  }
}

The above AuthGuardService implements the CanActivate route guard. It means that, if the guard returns true, the navigation will continue; otherwise, it navigates to login.

Import AuthGuardService in app-routing.module.ts.

import { 
  AuthGuardService as AuthGuard 
} from './auth-guard.service';

Add the route guard to the home route in app-routing.module.ts.

const routes: Routes = [
  { path: 'home', component: AppComponent, canActivate : [AuthGuard] },
  { path: 'login', component : LoginComponent}
];

Inside the Login component, on click you need to make the API call the Node authentication API. Here is how the login.component.ts file looks:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
import { Router } from '@angular/router';

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

  userEmail : String;
  userPassword : String;

  constructor(private authService : AuthService, private router : Router) { }

  ngOnInit() {

  }

  login(){
    this.authService.validate(this.userEmail, this.userPassword)
    .then((response) => {
      this.authService.setUserInfo({'user' : response['user']});
      this.router.navigate(['home']);

    })
  }

}

For the API call to work from Angular to Node, you need to add a proxy conf file in the Angular app. Create a file called proxy.conf.json and add the following code :

{
    "/api/*": {
      "target": "http://localhost:3000",
      "pathRewrite": {"^/api" : ""}
    }
  }

Save the above changes and run the Angular app along with the Node REST API. Open the localhost:4200/home route and you will be redirected to the login screen. Once there, enter the credentials as admin and admin and you will be redirected to the Angular dashboard screen.

Wrapping it Up

In this tutorial, you learned how to authenticate a REST API using Passport. You also learned how to authenticate the Angular routes using route guards.

You used the passport-local strategy to implement authentication. In addition to passport-local, there are a number of other Passport strategies for authentication.

Implementing File Upload Using Node and Angular

Jay — Mon, 22 Apr 2019 16:21:17 +0000

In this tutorial, you'll learn how to implement file upload using Angular and Node.js. Using Express Node, you'll create the file upload request handler which will upload the file to the server. You'll implement the file upload user interface using Angular.

The source code from this tutorial is available on GitHub.

Creating the Angular App

To get started with this tutorial, you'll need to install the Angular CLI in your system. Let's get started with installing the Angular CLI using Node Package Manager (npm).

npm install -g @angular/cli

Once you have installed the Angular CLI, create an Angular app using the command line tool.

ng new angular-file-upload

The above command will create the Angular project boilerplate. Navigate to the project directory and start the Angular app.

cd angular-file-upload
npm start

Point your browser to http://localhost:4200 and you will have the default application running.

Creating the File Upload UI

The default Angular boilerplate code creates an Angular component called AppComponent in the src/app/ folder. A component has an HTML file, a controller file, and a CSS file.

Remove the HTML code from the src/app/app.component.html and add the following code:

<div class="mainContainer">
    <div class="content">
        <div class="header">
            <h1>Angular File Upload</h1>
        </div>
        <div class="row margin25">

            <div class="col-md-4">

            </div>
            <div class="col-md-4">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text upload" id="btnUpload">Upload</span>
                    </div>
                    <div class="custom-file">
                        <form action="/api/upload" method="post" enctype="multipart/form-data">
                            <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
                        </form>
                        <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                    </div>
                </div>
            </div>
            <div class="col-md-4">

            </div>
        </div>
    </div>
</div>

Add the following CSS style to the src/app/app.component.css file.

.header {
    text-align: center;
}

.header h1 {
    font-family: serif;
    font-size: 38px;
    font-family: 'Times New Roman';
}

.content {
    margin: 100px;
}

.margin25 {
    margin: 25px;
}

.upload {
    cursor: pointer;
}

You'll be using bootstrap for styling up the Angular user interface. So, install bootstrap using npm inside the Angular project.

npm install --save bootstrap

Once you have installed bootstrap, include the Bootstrap style inside the angular.json file under the build configurations.

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

Save the application and you will be able to see the Angular user interface for file upload.

Creating the Node.js File Upload Handler

You need a file upload handler to handle the request sent from the Angular application. You'll be making use of the Express framework for creating the Node handler.

Create a folder called file-upload-server and initialize the Node project inside it.

mkdir file-upload-folder
cd file-upload-folder
npm init

Once you have the Node project initialized, install the express framework using npm.

npm install --save express

Create a file called app.js inside the project folder. You'll be making use of body-parser to parse the post parameter to the request handler. Install it now:

npm install --save body-parser

You'll also be using the connect-multiparty module to upload the file.

npm install --save connect-multiparty

Once you have the required dependencies for writing the file upload handler, let's start by creating the Express app. Add the following code to the app.js file:

const  express  =  require('express')
const  app  =  express()
const  port  =  3000

app.get('/api/upload', (req, res) => {
    res.json({
        'message': 'hello'
    });
});

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

As seen in the above code, you created the Express app using the express module. After creating the app, you defined the Express route /api/upload which returns a JSON message.

Save the above changes and start the Express app.

node app.js

Point your browser to http://localhost:3000/api/upload and you will have the JSON response rendered in the browser.

For writing the file upload request handler, you'll need a route which handles POST requests. So, modify the existing route to a POST route.

You'll be using the connect-multiparty module to handle file upload, so require the module and define the file upload folder. Make sure to create a folder called uploads inside the project directory.

const  multipart  =  require('connect-multiparty');
const  multipartMiddleware  =  multipart({ uploadDir:  './uploads' });

Add the connect-mutiparty middleware to the POST file upload route.

app.post('/api/upload', multipartMiddleware, (req, res) => {
    res.json({
        'message': 'File uploaded successfully'
    });
});

In order to parse the file upload request posted to the file handler route, you need to make use of the body-parser module. So, require the body-parser module and use it across the application.

const bodyParser = require("body-parser");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));

Here is how the app.js file looks:

const express = require('express')
const app = express()
const port = 3000
const bodyParser = require("body-parser");
const multipart = require('connect-multiparty');
const multipartMiddleware = multipart({
    uploadDir: './uploads'
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));

app.post('/api/upload', multipartMiddleware, (req, res) => {
    res.json({
        'message': 'File uploaded succesfully.'
    });
});

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

Save the changes and run the Node app.

node app.js

You will have the Express app running at http://localhost:3000.

File Upload From Angular

To route the file upload requests from Angular to the Node server, you need to set a proxy inside the Angular app. In the Angular app directory, create a proxy.conf.json file and add the following code to set a proxy to the node server.

{
    "/api/*": {
        "target": "http://localhost:3000/", "secure": false
    }
}

From the package.json file, modify the start script to serve the Angular app using the proxy.

ng serve --proxy-config proxy.conf.json

Now, add a file change event to the input type file element inside the app.component.html file.

<input  (change)="fileChange($event)"  type="file"  class="custom-file-input"  id="inputGroupFile01"  aria-describedby="inputGroupFileAddon01">

Define the fileChange method inside the app.component.ts file.

  fileChange(element) {
      this.uploadedFiles = element.target.files;
  }

On file change, the uploadedFiles array gets updated with uploaded files which can be posted to the file upload route on button click. Add the upload click event to the Upload button.

<span  class="input-group-text upload"  (click)="upload()"  id="btnUpload">Upload</span>

Define the upload method inside the app.component.ts file.

upload() {
    let formData = new FormData();
    for (var i = 0; i < this.uploadedFiles.length; i++) {
        formData.append("uploads[]", this.uploadedFiles[i], this.uploadedFiles[i].name);
    }
    this.http.post('/api/upload', formData)
    .subscribe((response) => {
         console.log('response received is ', response);
    })
}

Iterating the uploadedFiles array, you create the formData and POST it to the Express file handler /api/upload.

Here is how the app.component.ts file looks:

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

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

    uploadedFiles: Array < File > ;

    constructor(private http: HttpClient) {

    }

    ngOnInit() {

    }

    fileChange(element) {
        this.uploadedFiles = element.target.files;
    }

    upload() {
        let formData = new FormData();
        for (var i = 0; i < this.uploadedFiles.length; i++) {
            formData.append("uploads[]", this.uploadedFiles[i], this.uploadedFiles[i].name);
        }
        this.http.post('/api/upload', formData)
            .subscribe((response) => {
                console.log('response received is ', response);
            })
    }

}

Save the above changes and browse a file and click the upload button. On successful file upload, a success message will be logged in the browser console.

You can find the uploaded file in the uploads folder inside the Node server app.

Conclusion

In this tutorial, you learned how to implement file upload using Angular and Node.js. You used the Express framework for writing the file upload handler.

Also, if you're building Angular applications with sensitive logic, be sure to protect them against code theft and reverse-engineering by following this guide.

Originally posted on the Jscrambler Blog by Jay Raj.