XLSX File Read in Angular


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.
XLSX File Read In Angular
Step 2
Next, we need the open created project in visual studio code and install the xlsx file reference npm using the following command.
XLSX File Read In Angular
Step 3
Once done the installation, we can add a reference in the app.component.ts file.
XLSX File Read In Angular
Modules whose classes are needed by the component of this module.
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.
It contains the path of this component’s HTML template.
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 .
  1. <div class="col-md-8 form-group">        
  2.   <input type="file" class="form-control" (change)="addfile($event)" placeholder="Upload file" accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">        
  3. </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.
  1. addfile(event)     
  2.   {    
  3.   this.file= event.target.files[0];     
  4.   let fileReader = new FileReader();    
  5.   fileReader.readAsArrayBuffer(this.file);     
  6.   fileReader.onload = (e) => {    
  7.       this.arrayBuffer = fileReader.result;    
  8.       var data = new Uint8Array(this.arrayBuffer);    
  9.       var arr = new Array();    
  10.       for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);    
  11.       var bstr = arr.join("");    
  12.       var workbook = XLSX.read(bstr, {type:"binary"});    
  13.       var first_sheet_name = workbook.SheetNames[0];    
  14.       var worksheet = workbook.Sheets[first_sheet_name];    
  15.       console.log(XLSX.utils.sheet_to_json(worksheet,{raw:true}));    
  16.         var arraylist = XLSX.utils.sheet_to_json(worksheet,{raw:true});     
  17.             this.filelist = [];    
  18.             console.log(this.filelist)    
  20.   }    
  21. }    
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.
ng serve –open (OR) ng serve port –4201
Step 7
Now, the project will run successfully in local browser.


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.
XLSX File Read In Angular