Introduction
There are lots of CSV reader libraries available for Angular 7 but we will read CSV files without any library in this article and will upload a CSV file from the UI rather than a static path or source, in order to make it dynamic.
Prerequisites
- Basic knowledge of Angular 7
- Visual Studio Code
- Angular CLI must be installed
- NodeJS must be installed
Let’s get started.
Open Visual Studio Code and open a new terminal.
![New terminal]()
Type the following command in it.
ng new Angular7-readCSV
Go to the Root folder, select "Yes" for Angular routing, and use CSS for the stylesheet.
![Stylesheet]()
Open the project in Visual Studio Code by opening the folder by command.
code .
![Angular]()
![Code]()
Create one new file, namely "CSVRecord" in the app folder and paste the below code.
export class CSVRecord {
public id: any;
public firstName: any;
public lastName: any;
public age: any;
public position: any;
public mobile: any;
}
![App folder]()
Open the "app.component.html" file to and paste the below HTML code.
![HTML code]()
<input type="file" #csvReader name="Upload CSV" id="txtFileUpload" (change)="uploadListener($event)" accept=".csv" />
<table class="minimalistBlack" *ngIf="records.length > 0">
<thead>
<tr>
<th>ID </th>
<th>FirstName </th>
<th>LastName </th>
<th>Age </th>
<th>Position </th>
<th>Mobile </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let record of records; let i = index;">
<td> <span>{{record.id}}</span> </td>
<td> <span>{{record.firstName}}</span> </td>
<td> <span>{{record.lastName}}</span> </td>
<td> <span>{{record.age}}</span> </td>
<td> <span>{{record.position}}</span> </td>
<td> <span>{{record.mobile}}</span> </td>
</tr>
</tbody>
</table>
Now, open the "app.component.ts" file to write our main logic which reads the CSV file and generates the file data in the table.
![CSV file]()
import { Component, ViewChild } from '@angular/core';
import { CSVRecord } from './CSVModel';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular7-readCSV';
public records: any[] = [];
@ViewChild('csvReader') csvReader: any;
uploadListener($event: any): void {
let text = [];
let files = $event.srcElement.files;
if (this.isValidCSVFile(files[0])) {
let input = $event.target;
let reader = new FileReader();
reader.readAsText(input.files[0]);
reader.onload = () => {
let csvData = reader.result;
let csvRecordsArray = (<string>csvData).split(/\r\n|\n/);
let headersRow = this.getHeaderArray(csvRecordsArray);
this.records = this.getDataRecordsArrayFromCSVFile(csvRecordsArray, headersRow.length);
};
reader.onerror = function () {
console.log('error is occured while reading file!');
};
} else {
alert("Please import valid .csv file.");
this.fileReset();
}
}
getDataRecordsArrayFromCSVFile(csvRecordsArray: any, headerLength: any) {
let csvArr = [];
for (let i = 1; i < csvRecordsArray.length; i++) {
let curruntRecord = (<string>csvRecordsArray[i]).split(',');
if (curruntRecord.length == headerLength) {
let csvRecord: CSVRecord = new CSVRecord();
csvRecord.id = curruntRecord[0].trim();
csvRecord.firstName = curruntRecord[1].trim();
csvRecord.lastName = curruntRecord[2].trim();
csvRecord.age = curruntRecord[3].trim();
csvRecord.position = curruntRecord[4].trim();
csvRecord.mobile = curruntRecord[5].trim();
csvArr.push(csvRecord);
}
}
return csvArr;
}
isValidCSVFile(file: any) {
return file.name.endsWith(".csv");
}
getHeaderArray(csvRecordsArr: any) {
let headers = (<string>csvRecordsArr[0]).split(',');
let headerArray = [];
for (let j = 0; j < headers.length; j++) {
headerArray.push(headers[j]);
}
return headerArray;
}
fileReset() {
this.csvReader.nativeElement.value = "";
this.records = [];
}
}
For a better look open "app.component.css", copy the below CSS and paste it there.
![CSS]()
table.minimalistBlack {
border: 3px solid #000;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table.minimalistBlack td,
table.minimalistBlack th {
border: 1px solid #000;
padding: 5px 4px;
}
table.minimalistBlack tbody td {
font-size: 13px;
}
table.minimalistBlack thead {
background: #cfcfcf;
background: -moz-linear-gradient(top, #dbdbdb 0, #d3d3d3 66%, #cfcfcf 100%);
background: -webkit-linear-gradient(top, #dbdbdb 0, #d3d3d3 66%, #cfcfcf 100%);
background: linear-gradient(to bottom, #dbdbdb 0, #d3d3d3 66%, #cfcfcf 100%);
border-bottom: 3px solid #000;
}
table.minimalistBlack thead th {
font-size: 15px;
font-weight: 700;
color: #000;
text-align: left;
}
table.minimalistBlack tfoot {
font-size: 14px;
font-weight: 700;
color: #000;
border-top: 3px solid #000;
}
table.minimalistBlack tfoot td {
font-size: 14px;
}
That’s it. Fire the following command to see the beauty!
ng serve
Open your browser on http://localhost:4200/ or click on “http://localhost:4200/”.
Output
![Output]()
Please give your valuable feedback/comments/questions about this article. Please let me know how you like and understand this article and how I could improve it.
You can download the source code from here.