XLSX File Read in Angular

Introduction

 

In this article, I will explain angular component action and how to read an xlsx file. Please follow the below steps.

 

Whats is Angular

 

Angular is a client-side JavaScript framework that allows us to create a Reactive Client-side Application. By design, it comes with a Modular Approach, so you can reuse the code wherever you want. It supports many inbuilt functionalities.

 

Main of Angular

1. Modules
2. Components
3. Templates
4. Metadata
5. Data binding
6. Directives
7. Services
8. Dependency Injection  

Angular Component Action

• app.component.css
• app.component.html
• app.component.spec.ts
• app.component.ts
• app.module.ts

CSS file

 

Where we define all the styles for that component. These styles will only be scoped to this component and will not leak to the outside.

 

HTML file

 

Contains the markup to render in the DOM.

 

spec file

 

Includes the unit tests.

 

TypeScript file

 

Where we define the state (the data to display) and behavior (logic) of our component.

1. Angular Server serves the index.html and renders the application view in the browser.
2. The index.html contains all the JS, styles, compilation files that are required to run the application. 
3. The index.html holds the root component (AppComponent) which is bootstrapped from the root model and is loaded 1st.
4. The index.html should have only one component that is root component by the directive <app-root></app-root> (template directive).
5. The selector property value is used to create and attach the instance of the class in the inner HTML of the element.
6. A root component with multiple nested child components.

Requirements for the application:

1. NodeJs
2. Angular CLI
3. Visual studios code IDE

Install Angular CLI

 

Once done, the node & NPM installation after we install Angular CLI.

 

Why We need angular CLI

 

We use Angular CLI to create projects, generate library files. You can globally install the Angular CLI using the below command.

 

Npm install –g @angular/cli

 

Step 1

 

Now create an angular project, and open the terminal command prompt using the below command. Don’t forget adding angular-routing in your project.

 

 

Step 2

 

Next, we need the open created project in visual studio code and install the xlsx file reference npm using the following command.

 

 

Step 3

 

Once done the installation, we can add a reference in the app.component.ts file.

 

 

imports

 

Modules whose classes are needed by the component of this module.

 

selector

 

Selector tells Angular to create and insert an instance of this component where it finds <product-desc> tag.

 

For example, if an app’s HTML contains <product-desc></product-desc>, then Angular inserts an instance of the Product Description view between those tags.

 

templateUrl

 

It contains the path of this component’s HTML template.

 

styleUrls

 

We can specify the styles which are related to the current component.

 

Step 4

 

After open the app.component.html file and add the following code .

<div class="col-md-8 form-group">
  <input type="file" class="form-control" (change)="addfile($event)" placeholder="Upload file" accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
</div>

Whats Change?

 

Invoked event Changes every time there is a change in one of the input properties

 

[inputProperty] of the component.

 

Whats accept?

 

The accept tag tells the file types users can upload input.

 

Step 5

 

The next step is to open the app.component.ts file and add the following code.

addfile(event)
  {
  this.file= event.target.files[0];
  let fileReader = new FileReader();
  fileReader.readAsArrayBuffer(this.file);
  fileReader.onload = (e) => {
      this.arrayBuffer = fileReader.result;
      var data = new Uint8Array(this.arrayBuffer);
      var arr = new Array();
      for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
      var bstr = arr.join("");
      var workbook = XLSX.read(bstr, {type:"binary"});
      var first_sheet_name = workbook.SheetNames[0];
      var worksheet = workbook.Sheets[first_sheet_name];
      console.log(XLSX.utils.sheet_to_json(worksheet,{raw:true}));
        var arraylist = XLSX.utils.sheet_to_json(worksheet,{raw:true});
            this.filelist = [];
            console.log(this.filelist)

  }
}

File reader converting to array buffer.

 

After arraybuffer with xlsx convertor.

 

Step 6

 

Once after completing all the above steps, we can run the project using the below commands.

 

Command

 

ng serve –open (OR) ng serve port –4201

 

Step 7

 

Now, the project will run successfully in local browser.

 

Summary

 

I hope you understood this overview of Angular CLI and how to add a .xls file read.

 

Any feedback or queries related to this article are most welcome.