Forem: Ankit Prajapati

Angular SEO - Integrate Google Analytics in Angular

Ankit Prajapati — Wed, 30 Sep 2020 16:07:32 +0000

Google Analytics is a popular analytical tool for web and mobile applications from Google. It helps to track real-time and historical website traffic stats.

Google Analytics data helps to do SEO (Search Engine Optimization) of web and mobile apps.

Key Features of Google Analytics

Tracking web site traffic, page views, sessions, bounce rate.
Tracking traffic sources, events, conversations, referrals.
Provides information about new users and returning users details, page load time.
Provides information about user demographics, device type, mobile device screen resolution, language, browser and OS details, network details
User acquisition details, Search console details like search queries, landing pages.
Campaign details, Traffic through Google Ads, social media traffic.

and many more things. It provides reports of each above feature, which helps to analyze your users and take further business decisions to increase the growth of the product, website, or app.

In this article, we will see how to integrate google analytics in angular application.

👉 Checkout original article for detailed explanation : Integrate Google Analytics with Angular at NgDevelop

How Google Analytics Track Page Views?

Google analytics provides a tracking code snippet, which we need to put in the HEAD section of each page. When that page is loaded it will trigger an event to capture a page view.

This approach works well for traditional web applications because for each page view tracking code snippet will be loaded and executed.

However, In Single Page Application (SPA) has a single index.html where all other routes are dynamically rendered, because of that that tracking code snippet will be loaded only once. So that the google analytics event will be triggered only once when the initial page is rendered.

So in angular, to capture different route change we need manually trigger page view events.

So let's do it...

Application Setup

In this article, we will not cover angular application development from scratch.

👉 Learn Angular Application Development from Scratch here.

I have created one angular application which has two routes /home and /demo. We will integrate google analytics in this application to capture page views.

We will require the google analytics tracking code to track our application.

Get Google Analytics Tracking Code for Application

Sign in to Google Analytics
Open Admin Panel and click on + Create Property. A property represents your website or app and is the collection point in Analytics for the data from your site or app. You can create multiple properties with one google analytics account.
Select Web or App and fill the required details – Website name, website URL, Industry Category and TimeZone
Now click on the create button to create a property.

Once your property is created it will generate a global site tag(gtag.js) snippet for your application.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING_CODE"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config',[TRACKING_CODE]);
</script>

Note: TRACKING_CODE is your application’s unique tracking code, it will be like UA-XXXXX-X
Now, above tracking code snippet we will install in our application to track page views.

Install Tracking Code Snippet In Angular

Copy and paste the tracking code in head section of index.html as shown below

<!doctype html>
<html lang="en">

<head>
    ... 
    ... 
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-CODE"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        /** Disable automatic page view hit to fix duplicate page view count  **/
        gtag('config', 'TRACKING-CODE', {send_page_view: false});
    </script>

</head>

<body>
    <app-root>App Loading...</app-root>
</body>

</html>

Replace TRACKING-CODE with your tracking code. it will be like UA-XXXXX-X.

Note: gtag(config, TRACKING-CODE) trigger’s an event to capture page view, but in our app, we will capture page views on route change.
So REPLACE gtag(config, TRACKING-CODE) with gtag('config', 'TRACKING-CODE', { send_page_view: false}); So that it doesn’t count page view twice.

Trigger Page View Event On Route Change

Here, We want to trigger the google analytics page view event on route change.

For this, we need to subscribe to the Router.events and on NavigationEnd event we will trigger the google analytics page view event.

We will add router event subscription in app.component.ts. You can also create separate service to handle google analytics page views and events.

We will use gtag function which is globally exported by gtag.js to trigger a google analytics page view event.

...
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

declare const gtag: Function;

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

  ...

  constructor(private router: Router) {
    ...

    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {

      /** START : Code to Track Page View  */

       gtag('event', 'page_view', {
          page_path: event.urlAfterRedirects
       })

      /** END */
    })
  }

}

Great ✨✨✨ We are done with the google analytics setup in angular.

Now open google analytics and test whether it is capturing page views properly or not.

As you can see below, Google Analytics is now showing the number of users and active pages.

Environment Specific Google Analytics Setup with Angular

Check out the original article: 📄Integrate Google Analytics with Angular for step by step implementation of environment-specific google analytics setup with angular.

Summary

In this article, we have seen the integration of Google Analytics with Angular. We have seen how to trigger the pageview event manually on route change.

I hope you like this article, please provide your valuable feedback and suggestions in the comment section below🙂.

Give your 🤎 with Like and Share. Follow me on twitter @Ankit_NgDevelop

Develop Charts in Angular with NGX-CHARTS

Ankit Prajapati — Tue, 30 Jun 2020 18:54:02 +0000

Charts helps us to visualize large amount of data in an easy to understand and interactive way.

This helps businesses to grow more by taking important decisions from the data.

For example, e-commerce can have charts or reports for product sales, with various categories like product type, year, etc.

In angular, we have various charting libraries to create charts. Ngx-charts is one of them.

Check out the list of best angular chart libraries.

In this article, we will see data visualization with ngx-charts and how to use ngx-charts in angular application ?

We will see,

How to install ngx-charts in angular ?
Create a vertical bar chart

👉 This article was originally published at NgDevelop Blogs. Checkout the complete article How to use ngx-charts in angular ?. This article includes other important chart examples. like pie chart, advanced pie chart and pie chart grid.

Introduction

ngx-charts is an open-source and declarative charting framework for angular2+. It is maintained by Swimlane.

It is using Angular to render and animate the SVG elements with all of its binding and speed goodness and uses d3 for the excellent math functions, scales, axis and shape generators, etc.

By having Angular do all of the renderings it opens us up to endless possibilities the Angular platform provides such as AoT, Universal, etc.

ngx-charts supports various chart types like bar charts, line charts, area charts, pie charts, bubble charts, doughnut charts, guage charts, heatmap, treemap and number cards.

It also supports features like autoscaling, timeline filtering, line interpolation, configurable axis, legends, real-time data support and so on.

Ngx-charts Installation

Create a new angular application using the following command (Note: skip this step if you want to add ngx-charts in the existing angular application, At the time of writing this article I was using angular 9).

ng new ngx-charts-demo

Install ngx-charts package in an angular application using the following command.

npm install @swimlane/ngx-charts --save

At the time of installation if you get the following error

ERROR in The target entry-point "@swimlane/ngx-charts" has missing dependencies:
 - @angular/cdk/portal

we need to add @angular/cdk using the following

npm install @angular/cdk --save

Import NgxChartsModule from 'ngx-charts' in AppModule.
ngx-charts also required the BrowserAnimationsModule. Import it in AppModule.

So our final AppModule will look like :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxChartsModule }from '@swimlane/ngx-charts';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

Great, Installation steps are done. Now let’s develop various charts using ngx-charts components.

In AppComponent we will create the following sales data array. We will use this object to generate charts.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  saleData = [
    { name: "Mobiles", value: 105000 },
    { name: "Laptop", value: 55000 },
    { name: "AC", value: 15000 },
    { name: "Headset", value: 150000 },
    { name: "Fridge", value: 20000 }
  ];
}

Now lets use this data to create a vertical bar chart with ngx-charts bar chart component.

Vertical Bar Chart

To generate a vertical bar chart, ngx-charts provide ngx-charts-bar-vertical component, add it on the template as below:

<ngx-charts-bar-vertical 
    [view]="[1000,400]"
    [results]="saleData"
    [xAxisLabel]="'Products'"
    [legendTitle]="'Product Sale Chart'"
    [yAxisLabel]="'Sale'"
    [legend]="true"
    [showXAxisLabel]="true"
    [showYAxisLabel]="true"
    [xAxis]="true"
    [yAxis]="true"
    [gradient]="true">
</ngx-charts-bar-vertical>

Vertical Bar Chart of Sales Data

👉 Important properties of ngx-charts-bar-vertical component

results: To render salesData chart we need to assign this data object to results
view: set width and height of chart view
xAxisLabel: set x-axis label
legendTitle: set legend title
legend : if you want to show legend set it to true, default it is false.
showXAxisLabel : set true to show x-axis label.
showYAxisLabel : set true to show y-axis label.
xAxis / yAxis : set true to show specific axis.
gradient: set it to true to show bar with gradient background.

Pie Chart, Advanced Pie Chart and Pie Chart Grid

👉 Checkout complete article at How to use ngx-charts in angular application?.

Summary

In this article, We have seen data visualization with ngx-charts in angular application. We have installed the ngx-charts library and created vertical bar chart using sample sales data.

I hope you like this article, please provide your valuable feedback and suggestions in below comment section🙂.

For more updates, Follow us 👍 on NgDevelop Facebook page.

Checkout the other best angular chart libraries.

Implement Angular Server Side Rendering and Deploy Angular Universal App to Firebase with Schematics

Ankit Prajapati — Thu, 21 May 2020 03:52:24 +0000

In this article, we will see,

How to implement angular server-side rendering with just one command using angular universal schematic.
Deploy Angular Universal Project as a Firebase Cloud function using firebase schematic.

Before we start with the implementation of server-side rendering in Angular with Angular Universal, let’s see why server-side rendering and what is Angular Universal?

This blog originally published🚀 at NgDevelop's Blogs : Checkout the complete article at 📄Implement Angular Server Side Rendering With Just One Command

Quick View

Source: NgDevelop Blog

Why Server-Side Rendering? and What is Angular Universal?

Loading the first-page quickly is a critical part of any web application.

Normal Angular applications get loaded only when it loads the required main.js, vendor.js, pollyfills.js and runtime.js. As your main.js size increases initial loading time also increases.

According to 2018 research by Google, 53% of mobile users leave a site that takes longer than three seconds to load.

We can optimize the initial loading time of angular application using angular universal (server-side rendering).

This will quickly load the initial page, which will give the user a chance to quickly view the initial layout until a complete angular application becomes fully interactive.

Server-Side Rendering also helps in SEO (Search Engine Optimization) and Improving performance on mobile and low powered devices.

Implement Angular Server Side Rendering with Just One Command

In Angular 9 release, Angular Universal Team came up with a ng add schematic to implement SSR in angular application.

ng add @nguniversal/express-engine

Angular universal schematic execution
Source: Implement Angular Server Side Rendering Blog

This schematic will add and update all required files to implement server-side rendering in angular application.

This will add the following files :

src/main.server.ts
src/app/app.server.module.ts
tsconfig.server.json
server.ts

and update the following files :

angular.json
package.json
src/main.ts
src/app/app.module.ts

Server-Side Rendering on Local System

@nguniversal/express-engine schematic also add the CLI builders to start server-side rendering on the local system and generating production build with SSR.

This schematic adds the following scripts in package.json.

"dev:ssr": "ng run [project_name]:serve-ssr",
"serve:ssr": "node dist/[project_name]/server/main.js",
"build:ssr": "ng build --prod && ng run [project_name]:server:production",
"prerender": "ng run [project_name]:prerender"

Using the following command, We can start rendering our app with Universal on the local system.

npm run dev:ssr

This will serve the angular application with server-side rendered pages on localhost:4200. you can confirm angular universal implementation by looking into the page source.

If you find rendered HTML in the page source, Great !!! angular universal implementation is done ✨✨✨

Deploy Angular Universal App to Firebase

Angular Firebase Team also has added a new feature in ng add @angular/fire.

While you add the @angular/fire using ng add, it will check whether the current project is an angular universal project, if yes it will ask the following question.

We detected the Angular Universal Project, Do you want to deploy it as a Firebase Function?

If you enter y/yes here, it will install some more packages to implement firebase cloud functions to deploy angular universal project.

Deploy Angular Universal as a Firebase Cloud Function : ng add @angular/fire Source: Implement Angular Server Side Rendering Blog

Once Firebase installation is done we can 🚀deploy our angular universal project to firebase using just ng deploy command.

Once the application is hosted on the server, it will give you the running URL. Open this URL in a browser, and verify whether Server Side Rendering is done or not.

If all the above steps are successfully executed, Great!!! You have successfully deployed your angular universal app to firebase.✨✨✨

Checkout the sample deployed application here : https://angularpractice-c30b3.web.app/

Checkout the original article here : Implement Angular Server Side Rendering

I hope you like this article, please provide your valuable feedback and suggestions in below comment section🙂.

Show your ❤ with like and comments.

Thank you.

Exporting Data to Excel file in Angular using ExcelJS

Ankit Prajapati — Sun, 29 Mar 2020 07:54:38 +0000

Generating Reports in Excel Sheet is a common use case for any application. There are different ways to generate excel file in Web application. You can generate it on server and download it on client side. Also another approach is you can generate Excel file on client-side (directly in browser).

Client-Side Excel file generation can be very helpful for reducing API calls and real-time excel sheet generation (without calling any API).

In this article, we will see How to export an excel file in Angular application ?

This article is originally published on NgDevelop Blog
Check out the original article 📰 Export to Excel in Angular using ExcelJS (Client Side Excel Generation in Angular)

Client-Side Excel Generation Libraries

Two important open source libraries available to read/write an excel in the client-side web applications are :

ExcelJS
XLSX and XLSX-Style

Both libraries are used to read, manipulate and write spreadsheet data and styles to XLSX and JSON.

Initially, I had used XLSX & XLSX-style libraries to create and format an excel from JSON but the adverse point of this open-source library is it doesn’t provide any feature to add an image in excel (add image feature is available in pro version), which was the big requirement for my excel.

Later on, I found ExcelJS, which is really easy to use, provide almost all the features of Excel, and the main thing is it also provide add image feature.

So lets start with step by step implementation :

Environment Setup

Create a Angular Project

Create a new angular project, if it is already created then go ahead with next step.

Install ExcelJS Library

npm install --save exceljs
Note: if you are using Angular 8 or below, then install exceljs@1.12.0.

Update tsconfig.js

ExcelJS is generally used for server side web applications in node. Here we want to use it in client side Angular application. for that we need to set compilerOptions in tsconfig.json as shown below :



"compilerOptions": {
    ...
    "paths": {
      "exceljs": [
        "node_modules/exceljs/dist/exceljs.min"
      ]
    }
  }

for Angular 4 & 5 configuration checkout out my original blog

Install file-saver

FileSaver.js is the solution to saving files on the client-side and is perfect for web apps that need to generate files, or for saving sensitive information that shouldn’t be sent to an external server.

It implements the saveAs() FileSaver interface in browsers that do not natively support it.

Install file-saver library using following command
npm install --save file-saver

Generate Excel with Formatting

Environment setup is done. Now lets start to build an excel.

We will create a separate service in our project called excel.service.ts, you can create it using below command

ng generate service excel

Import ExcelJS and FileSaver

In excel.service.ts, add the following import statements.



import { Workbook } from 'exceljs';
import * as fs from 'file-saver';

Create a separate method and data variables.

In excel.service.ts, We will create a separate method called generateExcel().
In this method, I have created some data variables as below, We will export these data in excel sheet.

Note: You can pass data from the component as a parameter in generateExcel() and generate a dynamic excel sheet.



const title = 'Car Sell Report';
const header = ["Year", "Month", "Make", "Model", "Quantity", "Pct"]
const data = [
  [2007, 1, "Volkswagen ", "Volkswagen Passat", 1267, 10],
  [2007, 1, "Toyota ", "Toyota Rav4", 819, 6.5],
  [2007, 1, "Toyota ", "Toyota Avensis", 787, 6.2],
  [2007, 1, "Volkswagen ", "Volkswagen Golf", 720, 5.7],
  [2007, 1, "Toyota ", "Toyota Corolla", 691, 5.4],
  ...
];

Create Workbook and Add Worksheet

Create a new workbook and add a new worksheet using addWorksheet() method of Workbook.



let workbook = new Workbook();
let worksheet = workbook.addWorksheet('Car Data');

Add Row and format the fonts.

We will use addRow() method of worksheet object. to add a row in a worksheet. as below,



// Add new row
let titleRow = worksheet.addRow([title]);

// Set font, size and style in title row.
titleRow.font = { name: 'Comic Sans MS', family: 4, size: 16, underline: 'double', bold: true };

// Blank Row
worksheet.addRow([]);

//Add row with current date
let subTitleRow = worksheet.addRow(['Date : ' + this.datePipe.transform(new Date(), 'medium')]);

Add Image in worksheet

To add an image in excel we need to add base64 of an image. I have saved the base64 of logo image in a separate file called carlogo.js as below.

export const logoBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAFKCAMAAADcyF29AAABxVBMVEVHcEwJCAggFxEBAQE2KyQAAAA0LScAAAAAAAA1LysXEQ0EBAQFBAMDAwMLCQgGBQUFBAOEQhUHBwZjQSuScFoVFRZvNAx5NghcOyaudU8yMDBrNhOiViMZFhXEdD3Ef0+4ZzFISUdSJwliMA6BPA6lVR8CAgEDAgQPDhANDgsKCQoVFhPObi4SERS2VxcE.......";

To use it in generateExcel() method, We need to import carlogo.js in excel.service.ts as below,

import * as logoFile from './carlogo.js';

Now, add an image in a worksheet as below,



let logo = workbook.addImage({
      base64: logoFile.logoBase64,
      extension: 'png',
});
worksheet.addImage(logo, 'E1:F3');

workbook.addImage(image) creates an image object and returns the image id, that image id we will use to place image in the worksheet using worksheet.addImage(imageId, cellRange). The coordinates calculated from the range will cover from the top-left of the first cell to the bottom right of the second.

Merge Cells

We can merge cells using worklist.mergeCells(cellRange) method, as below,
worksheet.mergeCells('A1:D2');
The coordinates calculated from the range will cover from the top-left of the first cell to the bottom right of the second.

Add Data with Header & Conditional Formatting

We will add a header row for car data records with a background color, as below,



//Add Header Row
let headerRow = worksheet.addRow(header);

// Cell Style : Fill and Border
headerRow.eachCell((cell, number) => {
  cell.fill = {
    type: 'pattern',
    pattern: 'solid',
    fgColor: { argb: 'FFFFFF00' },
    bgColor: { argb: 'FF0000FF' }
  }
  cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } }
});

ExcelJS directly doesn’t support conditional formatting, but we can achieve this functionality by assigning style based on required condition in angular, as below,



// Add Data and Conditional Formatting
data.forEach(d => {
  let row = worksheet.addRow(d);
  let qty = row.getCell(5);
  let color = 'FF99FF99';
  if (+qty.value < 500) {
    color = 'FF9999'
  }
  qty.fill = {
    type: 'pattern',
    pattern: 'solid',
    fgColor: { argb: color }
  }
}
);

Same way, you can add other rows like footer and additional information.

Export Excel file using FileSaver

Now our workbook is ready to export. We can export it using saveFile() method of file-saver, as shown below



workbook.xlsx.writeBuffer().then((data) => {
      let blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      fs.saveAs(blob, 'CarData.xlsx');
});

Great!!!👍👍👍 You have exported the excel file in Angular

Checkout Original Article and GitHub Repository

Read my original article 📰 Export to Excel in Angular using ExcelJS for a detailed and step-by-step explanation to generate excel file in each angular version.

GitHub Repository 📝 angular-export-an-excel-file

I hope you like this article. Please provide your valuable comments, feedback, and suggestions.

If you like the project please mark the ⭐ in the Github repository.

Keep Learning, Keep Sharing 🙂

Angular Export to PDF using PDFMake (Client-Side PDF Generation)

Ankit Prajapati — Sun, 06 Oct 2019 18:27:32 +0000

Generating PDF for reports, forms, invoices, and other data is a common use case for any web application.

Generating PDF at client side can be very helpful. We can format and design pdf as per our requirement without using any external tool.

The following are the two popular open-source javascript libraries available for client-side pdf generation.

PDFMake
jsPDF

In this article, you will see how to export a pdf file in angular 8 using pdfmake.

Find the complete article with an online resume builder demo application at NgDevelop Blog.

Check out the original article 📰 Angular Export to PDF using PDFMake (Client-Side PDF Generation)

GitHub Repository: 📝 https://github.com/ngdevelop-tech/angular-8-export-pdf

Live Application 🚀 : https://online-resume-builder.netlify.com/

Introduction

PDFMake is very popular client-side and server-side pdf generation javascript library. It has 100,000+ weekly downloads from npm. And 7K+ GitHub stars.

It is easy to use and provides all required features for pdf design and formatting with some extraordinary features like QR Code, Table of contents and Helper methods for Opening pdf, download pdf, and pdf printing.

Environment Setup and PDF Generation

Create a Angular Project

Use the below command to create a new Angular project with Angular CLI.
ng new online-resume-builder

Install PDFMake Library

npm install --save pdfmake

Import pdfmake and vfs_fonts

To begin in browser with the default configuration, we should include two files Pdfmake.js and vfs_fonts.js. When you install Pdfmake from npm it comes with the both file.

Now to use this files in angular component or service add below import statement on top of component/service



import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

Generate single line text pdf for testing our environment setup

PDFMake follows a declarative approach. It basically means, you’ll never have to calculate positions manually or use commands like writeText(text, x, y), moveDown etc…, as you would with a lot of other libraries. The most fundamental concept to be mastered is the document-definition-object which can be as simple as:

All the pdf formatting and design configuration are written in document-definition-object. As shown below :



export class AppComponent {
 generatePdf(){
  const documentDefinition = { content: 'This is an sample PDF printed with pdfMake' };
  pdfmake.createPdf(documentDefinition).open();
 }
}



<button (click)="generatePdf()">Open PDF</button>

Add Open PDF button on app.component.html and call generatePdf().

Serve your application and test. This will show pdf as below :

PDFMake comes with inbuilt methods :

Download the PDF : pdfMake.createPdf(docDefinition).download();
Open the PDF in new window : pdfMake.createPdf(docDefinition).open();
Open PDF in same window : pdfMake.createPdf(docDefinition).open({}, window);
Print the PDF: pdfMake.createPdf(docDefinition).print();

PDFMake also provides methods for :

Put the PDF into your own page as URL data
Get the PDF as base64 data
Get the PDF as a buffer
Get the PDF as Blob

Refer here for more details.

Online Resume Builder using Angular and PDFMake

Read my original article 📰 for a detailed and step-by-step explanation to create an Online resume builder application using Angular and PDFMake.

I hope you like this article. Please provide your valuable comments, feedback, and suggestions.

If you like the project please mark the ⭐ in the Github repository.

Keep Learning, Keep Sharing 🙂