Category Archives: angular new

Angular 9 tutorial for beginners

Regex | regular expression javascript | web form validation regex

some common regular expressions are below. If you find any errors comments below. I will correct my regex as soon as possible.
If you need any regex for your work, just ping below. I will help you to solve it.

Regex For	Regex	Example	Description

` if((endix+1) == el.inputs.length){ tbody =tbody +``+el.for+`

`+el.regex+`

`+inputer+``+el.descripton+`` } }); if((rix+1) == regexdata.length){ $tbody.innerHTML = tbody; } }); });

Standard Naming Regex
Email regex
comma-separated regex
Web URL regex
s3bucket regex

we will daily update all common regex soon. Please wait for a while. If you know or need any regular expression for your web development comment here. We will share our knowledge.

Angular automated testing

In this article, we will learn more about automated testing in angular.

What is automated testing?
It is type of testing software without humans with lesser time. It helps you to catch the defects before releasing the software.

How to write a test coding in angular?
Before jumping into the test coding. Let see the different type of testing in angular.

Type of Testing in angular

Unit Testing (UT)
Integration Testing (IT)
End to End Testing (e2e)

Unit Testing
Test a component in Isolation, without external resources (e.g. file system, database, API endpoints).

Easiest to write
Superfast
Don’t give us much confidence.

Integration Tests
Test a component with external resources (e.g. file system, database, API endpoints)
Integration tests: component + template
Unit tests: component

End-to-end Tests

Test the entire application as a whole.

More confidence
Very slow
Very fragile

Let’s see the fundamental of Unit Testing
Tests are first-class citizens.

Clean Coding Practices

Small functions/ methods (10 lines of code or less)
Proper naming
Single responsibility

Example of Unit testing in angular
compute.ts

//function
compute(number){
if(number < 0){
return 0;
}else{
return number + 1;
}
}

Use jasime javascript library to write the test code.
Common function using in angular is
describe() // suite
it() // spec
expect() // ecpected value

compute.spec.ts // test file

import {compute} from '.compute'
describe('compute', () =>{
it('should return O if input is negative', () => {
const result = compute(-1);
expect(result).toBe(0);
})
})

Run the code with “ng test compute”

 As you can see in the above image "Executed 1 of 1 success".
Run the ng test command create a browser instantiated and show like below. Karma will connected.

After click on debug and see it in the console will reply the same of the test result. You can save it in a file for your track.

This is how Unit testing will write. In next article will see the integration testing and later end to end testing.

How to read the excel file in angular with XSLX package

Here we add example code for fetching data from excel.

https://youtu.be/lD0D_cqBw74

Add XLSX package to the angular project

npm install xlsx –save

Download demo Excel

app.component.ts

uploadExcel(e) {
  
  try{
  
  const fileName = e.target.files[0].name;
  
  import('xlsx').then(xlsx => {
    let workBook = null;
    let jsonData = null;
    const reader = new FileReader();
    // const file = ev.target.files[0];
    reader.onload = (event) => {
      const data = reader.result;
      workBook = xlsx.read(data, { type: 'binary' });
      jsonData = workBook.SheetNames.reduce((initial, name) => {
        const sheet = workBook.Sheets[name];
        initial[name] = xlsx.utils.sheet_to_json(sheet);
        return initial;
      }, {});
      this.products = jsonData[Object.keys(jsonData)[0]];
      console.log(this.products);

    };
    reader.readAsBinaryString(e.target.files[0]);
  });

}catch(e){
   console.log('error', e);
}

}

app.component.html

 <input type="file" (change)="uploadExcel($event)">

  <table >
    <thead>
      <tr>
        <th>#</th>
        <th>Product Identity</th>
        <th>Product Name</th>
        <th>Product Price</th>
        <th>Seller Name</th>
        <th>Total Count</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let product of products; let i = index">
      <td>{{i+1}}</td>
        <td>{{product.identity}}</td>
        <td>{{product.name}}</td>
        <td>{{product.price}}</td>
        <td>{{product.sellerName}}</td>
        <td>{{product.count}}</td>
        <td>{{product.status}}</td>
      </tr>
    </tbody>
  </table>

app.component.css

table{
  width:75%;
  margin:20px auto;
}
table tr td, table tr{
  border-collapse: collapse;
  border:1px solid #ccc;
  font-size:14px;
}

I hope this will help. If any queries feel free to comment below.

Top ten Javascript tricks – part 1

Convert a string to an array of Characters using spread Syntax – ES6

// Split string uisng ES6 Spread
const angular  = 'angular';

//  old ways
const splicedAngualr = angular.split('');
// [ 'a', 'n', 'g', 'u' , 'l' , 'a' ,'r']

// new ES6 way
const splicedAngular = [...angular]
// [ 'a', 'n', 'g', 'u' , 'l' , 'a' ,'r']

Addition string (’10’) and number (5)

const str = '10';
const num = 5;

// This doesn't returnt the sum, its concatenated
str + num
// 105 (not correct)

//prepend string with "+" to calculate the sum
+str + num
// 15 (correct)

How to remove an Array Duplicates

const duplicates = [1, 2, 2, 4 , 5, 5, 6, 6];

const uniques = Array.from(new Set(duplicates));

// uniques [1, 2, 4, 5, 6]

3 ways to convert string to boolean

const isBool = 'Helperscript';

new Boolean(isBool) // true

Boolean(isBool) // true

!!isBool // true

How to check if NaN equals to NaN?

const item = NaN;

// this doesn't work
item === NaN; // false

//This works!
Object.is(item, NaN); // true

Two ways to repeat the strings

const str = 'J';

// 1. Repeat
str.repeat(3);

// 2. Fill
Array(3).fill(str).join('');

// result 'JJJJ'

Refactoring the ‘if’ condition

const isPerson = false;

//not correct
if(isPerson === false)

// correct
if(!isPerson)

Check if a string contains Substring

const word ='summer';

// old way
word.indexOf('sum') !=== -1 // true

// ES6 way
word.includes('sum');

Check the number is Negative or Positive

const num = -2;

// old ways
num === 0 ? num : (num > 0 ? 1 : -1) // -1

// ES6
Math.sign(num); // -1 if positive return 1

The standard naming pattern for boolean variable

// Non standard
const person =  false;
const age = false;
cosnt dance = false

// Good standard
const isPerson =  true;
const hasAge = true;
cosnt canDance = true

I hope this will helpful for most beginners as well as to everyone. Thanks for reading. If you know any tricks comment below.

Javascript tricks part2 >

create angular CDK multi drag, drop and multi sorting

Why this post?

Angular CDK has beautiful drag, drop, and sort facilities, but we only able to move only one at a time. So, I give a solution to move with multiple selections of lists.

https://youtu.be/p9VorqC3qCk

Angular CDK multi drag and drop with sorting video

Let see step by step from the package installation requirement.

npm i @angular/cdk

Step 1 – Next to import the needed module

import {DragDropModule} from ‘@angular/cdk/drag-drop’;

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {DragDropModule} from '@angular/cdk/drag-drop';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,FormsModule,CommonModule, DragDropModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I am using bootstrap jquery for Front End. If you don’t know how to import in angular. See this link.

Step 2 – Import some services like moveItemInArray, transferArrayItem form CDK drag-drop module.

import { CdkDragDrop, moveItemInArray, transferArrayItem } from ‘@angular/cdk/drag-drop’;

app.component.ts

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

import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

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

  public tasks = [{
    title: 'All Tasks',
    taskList: [{
      id: 1,
      selected: false,
      name: 'Task 1'
    }, {
      id: 2,
      selected: false,
      name: 'Task 2'
    }, {
      id: 3,
      selected: false,
      name: 'Task 3'
    }, {
      id: 4,
      selected: false,
      name: 'Task 4'
    }, {
      id: 5,
      selected: false,
      name: 'Task 5'
    }, {
      id: 6,
      selected: false,
      name: 'Task 6'
    }, {
      id: 7,
      selected: false,
      name: 'Task 7'
    }, {
      id: 8,
      selected: false,
      name: 'Task 8'
    },
    {
      id: 9,
      selected: false,
      name: 'Task 9'
    }, {
      id: 10,
      selected: false,
      name: 'Task 10'
    },
    ]
  }, {
    title: 'Monday',
    taskList: []
  }, {
    title: 'Tuesday',
    taskList: []
  }, {
    title: 'Wednesday',
    taskList: []
  }, {
    title: 'Thursday',
    taskList: []
  }, {
    title: 'Friday',
    taskList: []
  }
  ];
  public ctrlPress = false;
  public dragData = [];
  public stored = [];
  public sortIndex = [];

  ondragging(event, item, data) {
    this.dragData = data;
    const a = this.stored.findIndex(x => x.id === item.id);

    if (a === -1) {
      item.selected = true;
      let idx = data.indexOf(item);
      this.sortIndex.push(idx);
      this.sortIndex.sort();
      this.stored = [];
      this.sortIndex.forEach(i => {
        data[i].selected = true;
        this.stored.push(data[i]);
      });

    } else {

    }



    $('.selected').addClass('dragging');

    $('.cdk-drag-placeholder').css({ 'opacity': '0 !important' });


  }


  drop(event: CdkDragDrop<any[]>, dropdata) {
    $('.selected').removeClass('dragging');
    $('.selected').css({ 'opacity': 1 });
    $('.cdk-drag-placeholder').css({ 'opacity': 1 });
    if (this.stored.length === 1) {
      if (event.previousContainer === event.container) {
        moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
      } else {
        transferArrayItem(event.previousContainer.data,
          event.container.data,
          event.previousIndex,
          event.currentIndex);
      }
      this.stored = [];
      event.container.data.forEach((d) => {
        d.isMultidragging = false;
        d.selected = false;
      });
    } else {
      const storedCloner = JSON.parse(JSON.stringify(this.stored));
      if (event.previousContainer === event.container) {
        let b = event.currentIndex;
        const clonerdata = Object.assign([], event.previousContainer.data);

        const extra = Math.max.apply(Math, this.sortIndex.map((o) => { return o; }));
        if (extra < b) {
          b = b + 1;
        }
        clonerdata.forEach((elem, i) => {
          if (elem.selected) {
            const b = dropdata.findIndex(x => x.id === elem.id);
            dropdata[b].id = 0;

          }
          if (clonerdata.length === (i + 1)) {
            storedCloner.slice(0).reverse().forEach((item, idx) => {
              dropdata.splice(b, 0, item);
              if (storedCloner.length === (idx + 1)) {
                setTimeout(() => {
                  dropdata.forEach((el, index) => {
                    if (el.id === 0) {
                      dropdata.splice(index, 1);
                    }
                  }, 1000);
                });

              }
            });
          }
        });


        this.stored = [];
        event.container.data.forEach((d, id) => {
          if (d.id === 0) {
            event.container.data.splice(id, 1);
          }

          d.isMultidragging = false;
          d.selected = false;
        });


      } else {
        if (this.stored.length > 0) {
          event.previousContainer.data.slice(0).reverse().forEach((item, idx) => {
            if (item.selected) {
              event.previousContainer.data.splice(event.previousContainer.data.indexOf(item), 1);

              event.container.data.splice(event.currentIndex, 0, item)
              event.container.data.forEach((d) => {
                // d.isMultidragging=false;
                d.selected = false;
              })

            }
          });
          this.stored = [];

        } else {

          transferArrayItem(event.previousContainer.data,
            event.container.data,
            event.previousIndex,
            event.currentIndex);
          event.container.data.forEach((d) => {
            d.isMultidragging = false;
            d.selected = false;
          });
          this.stored = [];

        }
      }

    }

    this.sortIndex = [];


  }

  onKeyDown(e, item, data) {
    this.ctrlPress = e.ctrlKey;
    if (e.ctrlKey) {
      const idx = data.indexOf(item);
      this.sortIndex.push(idx);

      this.stored = [];
      const result = [];
      const map = new Map();
      for (const item of this.sortIndex) {
        if (!map.has(item)) {
          map.set(item, true);    // set any value to Map
          result.push(item);
        }
      }
      this.sortIndex = result;
      this.sortIndex.forEach(i => {

        data[i].selected = true;
        this.stored.push(data[i]);

      });
    }

  }

}

The above code has all functions like
1. ondragging() // drag started
2. drop() // on drop the dragged data
3. onKeyDown() // selection of list

We have a task list in the above example for Monday to Friday to assign the task.

ondragging() function doing when dragging the unselected element its check and added to the already item selected to drag. So when dropped if any selected item there will also be dropped into the container.

drop() function – It helps to drop the task in one container and remove the task from the previous container.

onKeyDown() function – It helps to select an item or deselect an item from the task list.

Step 3 – Add HTML for the front end view

app.component.html

<div class="container-fluid mt-2">
  <div class="container" cdkDropListGroup>
    <div class="row d-flex justify-content-start">

      <div class="col-md-4 mb-3" *ngFor="let task of tasks; let i = index">
        <div class="card">
          <div class="header">
            <h6 class="p-2 bg-secondary text-white text-uppercase">{{task.title}}</h6>

          </div>
          <div class="card-body p-0" style="height:300px;overflow:auto" cdkDropList [cdkDropListData]="task.taskList"
            (cdkDropListDropped)="drop($event, task.taskList)">
            <ul class="list-group">

              <li class="list-group-item border" *ngFor="let t of task.taskList" cdkDrag
                (cdkDragStarted)="ondragging($event, t, task.taskList)" (click)="onKeyDown($event, t, task.taskList)"
                [ngClass]="{'border-primary':t.selected,'selected':t.selected}">{{t.name}}
                <div *cdkDragPreview>
                  <ul class="list-group">
                    <li class="list-group-item border" *ngFor="let s of stored" style="min-width:200px;">{{s.name}}</li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>

        </div>

      </div>

    </div>

  </div>
</div>

Important to know the details of
1. cdkDropListGroup
2. cdkDropList
3. [cdkDropListData]
4. (cdkDropListDropped)
5. cdkDrag
6. (cdkDragStarted)

cdkDropListGroup => If you add to the top of the drag-drop containers. It says any drop list can able to accept the dragging data. If you want to some container will accept only form particular then you can use [cdkDropListConnectedTo] . Its an array you can push the reference in to drop list connected.

cdkDropList => It says that the container will accept the dragging data.

[cdkDropListData] => You will add task list data into this.

(cdkDropListDropped) => It is an event triggering when dropping initiated.

cdkDrag => Which says that the elements are draggable.

(cdkDragStarted) => It is an event triggering when drag started.

Step 4 – Add some CSS for better visibility.

app.component.css

.card-body::-webkit-scrollbar {
  width: 7px;
}
 
.card-body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 10px transparent;
}
 
.card-body::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;;
 border-radius:3.5px;
}
.selected.dragging{
  opacity:0.2;
}
.selected.dragging.cdk-drag-placeholder{
  opacity:0 !important;
}

That’s all. I hope this code will help you with something. Thanks for reading.

NOTE: If any queries feel free to ask in comment.

angular ng-filter-search to any component like table, list, div and etc

npm install ng-filter-search –save

Step1: Import FilterSearchModule to module.ts

https://www.npmjs.com/package/ng-filter-search

import {FilterSearchModule} from 'ng-filter-search';
@NgModule({
imports: [
    
    FilterSearchModule
  ]
})

step2: Import FilterSearchService to component.ts

import { Component } from '@angular/core';
import {FilterSearchService} from 'ng-filter-search';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public productList: any;
  // productList must be a type any.
  public cloner = [];
  // searchMap is defined to which key to filter
  public searchMap = ['name', 'price', 'sellerName', 'status'];
 
  constructor(private fs: FilterSearchService){
// dummy productList you can load from your api
    this.productList = [{
      id: 1,
      identity: 11012,
      name: 'Blue Headset',
      price: '$123',
      sellerName: 'Alibaba',
      count: 12,
      status: 'Sold Out'
    },
    {
      id: 2,
      identity: 31012,
      name: 'Red Shoe',
      price: '$143',
      sellerName: 'Amazon',
      count: 2,
      status: 'Available'
    },
    {
      id: 3,
      identity: 6423,
      name: 'Red Shoe',
      price: '$123',
      sellerName: 'FlipKart',
      count: 5,
      status: 'Available'
    },
    {
      id: 4,
      identity: 64123,
      name: 'Mi Phone',
      price: '$1123',
      sellerName: 'FlipKart',
      count: 11,
      status: 'Sold out'
    },
    {
      id: 5,
      identity: 86423,
      name: 'Redmi pro',
      price: '$223',
      sellerName: 'Alibaba',
      count: 9,
      status: 'Available'
    }];
    // this.cloner is important to copy your productList
    this.cloner = [...this.productList];
  }
 
  onSearchChange(sval: string): void {
    // Use filterSearch() function to filter the data
    this.productList =  this.fs.filterSearch(sval, this.cloner, this.searchMap);
}
}

HTML

Table Filter search

<input placeholder="SEARCH FILTER" (input)="onSearchChange($event.target.value)" />
 
<table>
    <thead>
      <tr>
        <th>#</th>
        <th>Product Identity</th>
        <th>Product Name</th>
        <th>Product Price</th>
        <th>Seller Name</th>
        <th>Total Count</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
    // productList is an array of an object from which we need to filter
      <tr *ngFor="let product of productList; let i = index">
      <td>{{i+1}}</td>
        <td>{{product.identity}}</td>
        <td>{{product.name}}</td>
        <td>{{product.price}}</td>
        <td>{{product.sellerName}}</td>
        <td>{{product.count}}</td>
        <td>{{product.status}}</td>
      </tr>
    </tbody>
  </table>

For list

<input placeholder="SEARCH FILTER" style="float:left" (input)="onSearchChange($event.target.value)" />
 
  <ul>
    <li *ngFor="let product of productList">{{product.name}}</li>
  </ul>

You can apply this filter for any search filter.

angular2 multi-select update data not working in an array

Hi! In this article, we learn something trick in angular. Sometimes angular 2 multi-select does not update after pushing the new data into the array.

Let’s have an example :
I had a dropdown list of country, I need to add a new country to the dropdown list.

this.dropdownList = [ { “id”: 1, “itemName”: “India” }, { “id”: 2, “itemName”: “Singapore” }, { “id”: 3, “itemName”: “Australia” }, ]

I need to add Canada to this list. So EveryOne did the same logic was to push data into an array using push() method in javascript. Like

this.dropdownList.push({id:4, itemName: ‘Canada’})

That’s fine. But sometimes this push method not update in your dropdown list. It’s not shown to your front end.

Let see a solution to such a situation. What I suggest just clone the old data and empty the current and reassign it to the list.

let cloner = […this.dropdownList]; this.dropdownList = []; // It may need or not need. this.dropdownList = cloner;

Example:
angular 2 multi-select: HTML5

angular 3 multi-select: .ts file

export class AppComponent { dropdownList = []; selectedItems = []; dropdownSettings = {}; ngOnInit() { this.dropdownList = [ { “id”: 1, “itemName”: “India” }, { “id”: 2, “itemName”: “Singapore” }, { “id”: 3, “itemName”: “Australia” }, ] this.dropdownSettings = { singleSelection: false, text: “Select Countries”, selectAllText: ‘Select All’, unSelectAllText: ‘UnSelect All’, enableSearchFilter: true, classes: “myclass custom-class” }; } onItemSelect(item: any) { console.log(item); console.log(this.selectedItems); } OnItemDeSelect(item: any) { console.log(item); console.log(this.selectedItems); } onSelectAll(items: any) { console.log(items); } onDeSelectAll(items: any) { console.log(items); } addCountry(){ this.dropdownList.push({id: 4, itemName: ‘Canada’}) } }

I hope this will helpful to you. Thank you for reading. If you like this please comment below. It will encourage me.

primeNg picklist alternative with listbox in angular

Pick-list angular PrimeNg alternative using ListboxModule

View demo Video

Hi! we had solution for how to remove buttons from picklist in PrimeNg. Unfortunately PrimeNg picklist not having options to remove left and right side of buttons. So, here the solutions we provide.

Let’s see step by step from installation

npm install primeng primeicons –save

After install the packages of primeng, add styles to angular.json file.

"styles": [
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/nova-light/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "src/styles.css"
            ],

After adding the style. Import the component we using. Here we use ListboxModule from Primeng/listbox.

import {ListboxModule} from 'primeng/listbox';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ListboxModule
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now lets jump into integration of custom picklist via listbox in PrimeNg

app.component.html

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <p-listbox [options]="users" filter="filter" multiple="true" checkbox="true"
            [style]="{'width':'100%'}" [listStyle]="{'max-height': '200px'}" [metaKeySelection]="false"
            [(ngModel)]="selectedUserList"></p-listbox>
        </div>
        <div class="col-md-2">
            <div class="my-2 ml-3"><i class="pi pi-angle-double-right clickable"
                (click)="moveUserToGroupMember()"></i></div>
            <div class="my-2 ml-3"><i class="pi pi-angle-double-left clickable" 
                (click)="moveGroupToUser()"></i></div>
        </div>
        <div class="col-md-3">
            <p-listbox [options]="groupUserList" filter="filter" multiple="true" checkbox="true"
            [style]="{'width':'100%'}" [listStyle]="{'max-height': '200px'}" [metaKeySelection]="false"
            [(ngModel)]="selectedGroupUsersList"></p-listbox>
        </div>
    </div>
</div>

I am using bootstrap for styling. If you don’t know how to import bootstrap to your app. See this link.

Now very interesting part. our custom picklist operations and functions.

app.component.ts


export class AppComponent {
public users = [];
public groupUserList = [];
public selectedUserList:any;
public selectedGroupUsersList:any;
constructor AppComponent(){
this.users = [
    { label: 'Ganesh', value: '3' },
    { label: 'John', value: '1' },
    { label: 'Joshua', value: '2' },


  ];
  this.groupUserList = [
    { label: 'Vetri', value: '5' },
    { label: 'shiva', value: '6' },
  ];
};


  moveUserToGroupMember() {
    this.users.forEach((elem, index) => {
      this.selectedUserList.forEach((selUser, indexes) => {
        if (selUser === elem.value) {
          this.groupUserList.push(elem);
          setTimeout(() => {
            this.removeByAttr(this.users, 'value', selUser);
          }, 500);
        }
      });
    });
  }
  moveGroupToUser() {
    this.groupUserList.forEach((elem, index) => {
      this.selectedGroupUsersList.forEach((selUser, indexes) => {
        if (selUser === elem.value) {
          this.users.unshift(elem);
          setTimeout(() => {
            this.removeByAttr(this.groupUserList, 'value', selUser);
          }, 500);
        }
      });
    });
  }

  removeByAttr = (arr, attr, value) => {
    let i = arr.length;
    while (i--) {
      if (arr[i]
        && arr[i].hasOwnProperty(attr)
        && (this.users.length > 0 && arr[i][attr] === value)) {

        arr.splice(i, 1);

      }
    }
    return arr;
  }

}

You can get selected Users from selectedUserList:any and selectedGroupUserList:any. That’s it now you can able to move users from one list to another list. Hope it will help to you. Further queries below in comment section. Have a great day!.

How to generate pdf in angular with the table and image from Client-side | Server-side

Pdf generate from angular with table images

To generate pdf from the client side with images. We need to convert the image to base 64. Let’s see how to convert images to base64 from our table data.

Example – My case table data look like:

tabledata = [{
    img: 'https://i.picsum.photos/id/258/536/354.jpg',
    name: 'Joseph',
    domain: 'Angular 9'
  },
  {
    img: 'https://i.picsum.photos/id/258/536/354.jpg',
    name: 'Vani',
    domain: 'Angular 8'
  }, {
    img: 'https://i.picsum.photos/id/258/536/354.jpg',
    name: 'Raj',
    domain: 'React.js'
  },
  ];

We need to convert the image from Image URL to base64

Base64 conversion function code:

convertImagetoBase64(url, callback) {
    const xhr = new XMLHttpRequest();
    xhr.onload = () => {
      const reader = new FileReader();
      reader.onloadend = () => {
        callback(reader.result);
      };
      reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
  }

Let convert the image URL to base64 before we bind to the table in HTML.

  this.tabledata.forEach(elem => {
      this.convertImagetoBase64(elem.img, (b64Img) => {
        elem.img = b64Img;
      });

After that we applying to HTML. If you don’t want to show in HTML of pdf generation you can simply apply style display: none to the table but your table will generate in pdf.

I have a different table in HTML.

<style>
    td, th{
        border:1px solid #ccc;
        padding:10px 15px;
    }
</style>
 
<table id="pdfConvert">
    <thead>
        <tr><th>Head 1</th>
        <th>Head 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>value 00</td>
            <td>value 01</td>
        </tr>
        <tr>
            <td>value 10</td>
            <td>value 11</td>
        </tr>
    </tbody>
</table>
 
 
<table id="imgTable" style=”display:none”>
    <thead>
        <tr><th>Name</th>
        <th>Domain</th>
        <th>Image</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of tabledata">
            <td>{{data.name}}</td>
            <td>{{data.domain}}</td>
            <td><img src="{{data.img}}" width="100" height="100" /></td>
        </tr>
       
    </tbody>
</table>
 
<button (click)="generatePdf()">Generate Pdf</button>

Each table has a id. This id attribute is the reference for generating pdf.

Before Generation, we need to install

npm install jspdf jspdf-autotable

For more reference: https://github.com/simonbengtsson/jsPDF-AutoTable

Let import the jspdf and jspdf-autoble to your .ts file

component.ts file:

import jsPDF from 'jspdf';
import 'jspdf-autotable';

Then generate pdf function look like:

generatePdf() {
    const doc = new jsPDF('l');
    // Heading
    doc.autoTable({
      columnStyles: {
        0: { cellWidth: 40, fillColor: '#fff', fontStyle: 'bold', fontSize: '11', textColor: '#000' },
        1: { cellWidth: 20, fillColor: '#fff', fontStyle: 'normal', fontSize: '11', textColor: '#fc0' },
        2: { fillColor: '#fff', fontStyle: 'normal', fontSize: '11', textColor: '#000' },
 
      }, // Cells in first column centered and green
      body: [
        ['Main Heading', 'Date', new Date()]
      ],
    });
    // Table 1
    doc.autoTable({
      html: '#pdfConvert'
    });
 
    // Table 2
    doc.autoTable({
      html: '#imgTable',
      bodyStyles: { minCellHeight: 20 },
      theme: 'grid',
      styles: { valign: 'middle', overflow: 'linebreak', halign: 'center', minCellHeight: 21 },
      pageBreak: 'avoid',
      columnStyles: {
        2: { cellWidth: 22, minCellHeight: 22 },
      },
      headStyles: { fillColor: '#f2f2f2', textColor: '#000', fontStyle: 'bold', lineWidth: 0.5, lineColor: '#ccc' },
      didDrawCell: (data) => {
        if (data.column.index === 2 && data.cell.section === 'body') {
          const td = data.cell.raw;
          const img = td.getElementsByTagName('img')[0];
          // let dim = data.cell.height - data.cell.padding('vertical');
          // let textPos = data.cell.textPos;
          doc.addImage(img.src, data.cell.x + 1, data.cell.y + 1, 19, 19);
 
        }
      }
    });
    // Table 3
    doc.autoTable({
      styles: { lineColor: 'red' },
      theme: 'grid',
      html: '#pdfConvert'
    });
 
    doc.save('yourpdfname.pdf');
 
  }

Then try to generate the pdf.

Note: If you face any issue like the above image. This is just a CORS policy issue. This is about the image URL is not belongs to you. You don’t use the copyrighted image. Use your own image URL or some free lorem ipsum image URL.

Thanks for reading. I hope this will helpful to you. Have a nice day. If you have any queries your inputs are welcome in comment sections.

Sign Up form with validation in angular | ReactiveFormModule

In this article, we going to learn about how to create a signup form with validating client-side errors.

Overview:

Add ReactiveFormModule in module.ts
Create and Design component
Import FormBuilder in component.ts file
Add password validator

Add ReactiveFormModule in module.ts

Code: app.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { EcommerceRoutingModule } from './ecommerce-routing.module';
import { MainComponent } from './main/main.component';
import {  ReactiveFormsModule } from '@angular/forms';
 
 
@NgModule({
  declarations: [MainComponent],
  imports: [
    CommonModule,
    BrowserModule,
    EcommerceRoutingModule,
    ReactiveFormsModule
  ],
  bootstrap: [MainComponent],
})
export class EcommerceModule { }

Create and Design component

In terminal type: ng g c signup to create a new component for sign up. After created the component. you must add bootstrap for styling. If you don’t know how to add bootstrap in angular, then go to this article and check that once and come back.

Code: signup.component.html

<section>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 col-sm-6 " style="height:100vh;">
                <div class="d-flex align-items-center" style="height:100%">
             <img src="assets/image/signupCat.svg" class="img-fluid" style="vertical-align:middle" />
            </div>
            </div>
            <div class="col-12 col-sm-6">
                    <div class="d-flex align-items-center justify-content-center" style="height:100%">
                        <div style="width:70%">
                        
                        <form class="form-horizontal"  [formGroup]='signUpForm' (submit)='onSubmit()'>
                            <div class="d-flex col-sm-8 justify-content-center">
                            <div class="text-dark pl-5" style="font-weight:bold;font-size:20px;">Sign Up!</div>
                            </div>
                            
                            <div class="form-group mb-4 position-relative">
                                <label for="name" class="col-sm-2 control-label">Name</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control"  id="name" placeholder="Name" formControlName="name" [ngClass]="{'border-danger': (!(signUpForm.controls['name'].valid)  && isSubmitted)?true :false}"/>
                                </div>
                                <div class="text-danger error" *ngIf="!signUpForm.controls['name'].valid  && isSubmitted">Name is required</div>
                            </div>
                            <div class="form-group mb-4 position-relative">
                                <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                                <div class="col-sm-10">
                                    <input type="email" class="form-control" id="inputEmail3"  placeholder="Email" [pattern]="emailPattern" formControlName="email" [ngClass]="{'border-danger': (!(signUpForm.controls['email'].valid)  && isSubmitted)?true :false}"  />
                                </div>
                                <div class="text-danger error" *ngIf="signUpForm.controls['email'].invalid  && isSubmitted">
 
                                    <div *ngIf="signUpForm.controls['email'].errors.required">
                                        Email is required
                                    </div>
                                    <div *ngIf="signUpForm.controls['email'].errors.pattern">
                                        Invalid email
                                    </div>
    
                                </div>
                            </div>
                            <div class="form-group mb-4 position-relative">
                                <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" id="inputPassword3" placeholder="Password" formControlName="password" [ngClass]="{'border-danger': (!(signUpForm.controls['password'].valid)  && isSubmitted)?true :false}" />
                                </div>
                                <div class="text-danger error" *ngIf="signUpForm.controls['password'].invalid  && isSubmitted">
                                    <div *ngIf="signUpForm.controls['password'].errors.required">
                                        Password is required
                                    </div>
                                    <div *ngIf="signUpForm.controls['password'].errors.minlength">
                                        Password must be minimum 8 character
                                    </div>
                                </div>
                            </div>
                            <div class="form-group mb-4 position-relative">
                                <label for="inputPassword4" class="col-sm-2 control-label">Confirm&nbsp;Password</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" id="inputPassword4" placeholder="Confirm Password" formControlName="confirmpassword" [ngClass]="{'border-danger': (!(signUpForm.controls['confirmpassword'].valid)  && isSubmitted)?true :false}"/>
                                </div>
                                <div class="text-danger error" *ngIf="!(signUpForm.controls['confirmpassword'].valid) && isSubmitted">
                                   
                                    <div class="text-danger" *ngIf="!(signUpForm.controls['confirmpassword'].valid) || signUpForm.get('confirmpassword').errors && 
                                    signUpForm.get('confirmpassword').errors.confirmpassword && isSubmitted || signUpForm.get('confirmpassword').errors && 
                      signUpForm.get('confirmpassword').errors.confirmpassword && (signUpForm.controls['confirmpassword'].dirty && isSubmitted || signUpForm.controls['confirmpassword'].touched)">
                                         Password does not match
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group mb-4 position-relative">
                                <div class="col-sm-offset-2 col-sm-10 text-center">
                                    <button type="submit" class="btn btn-dark" >Sign Up</button>
                                </div>
                            </div>
                        </form>
                    </div>
                   </div>
            </div>
        </div>
    </div>
</section>

If you need image which I used is fully free. Go to undraw.co , then click on illustration and search welcome cats. You can use anywhere its fully free vector image. you can have the option of download to both SVG and png. We can also change the color of the illustration as a need.

Code:signup.component.css

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
.error{
    position:absolute;
    left:15px;
}

Then go to the important todo. Import form builder and validators to our sign up module.

Code: singup.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { ConfirmPasswordValidator } from './passwordValidator';
@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
public signUpForm;
public isSubmitted = false;
emailPattern = '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$';
  constructor(
    private formBuilder: FormBuilder) { }
 
  ngOnInit(): void {
    this.signUpForm = this.formBuilder.group({
      name: ['', Validators.required],
      email: ['',  [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(8)]],
      confirmpassword: ['', Validators.required],
    },{ validator: ConfirmPasswordValidator.MatchPassword });
  }
 
  onSubmit(){
    this.isSubmitted = true;
    if(this.signUpForm.invalid){
      return;
    }
    alert(JSON.stringify(this.signUpForm.value));
  }
 
}

For password validation, we create another file and imported to this component.ts file

Example: create a file called passwordValidator.ts and add the code below
Code: passwordValidator.ts

import { AbstractControl } from '@angular/forms';
export class ConfirmPasswordValidator {
  static MatchPassword(control: AbstractControl) {
    const password = control.get('password').value;
    const confirmpassword = control.get('confirmpassword').value;
    if (password !== confirmpassword) {
      control.get('confirmpassword').setErrors({ Confirmpassword: true });
    } else {
      return null;
    }
  }
}

The above file is important to the password validators to check password matches or not. Then run the code. I hope this will help. You can easily use this code for any project you want.

If any queries about this signup form. Please ping in the comment and I will help you to solve the error. Have a good day!

helperscript

CODE BEGINNER SUPPORT

Category Archives: angular new

Regex | regular expression javascript | web form validation regex

Angular automated testing

How to read the excel file in angular with XSLX package

Top ten Javascript tricks – part 1

create angular CDK multi drag, drop and multi sorting

primeNg picklist alternative with listbox in angular

How to generate pdf in angular with the table and image from Client-side | Server-side