Reading CSV File on Angular

Creating an Angular Project

For visual learner, you can watch the tutorial from youtube. link

In this brief article, I will be explaining how to read CSV files in the Angular Project. We will be using CSV file provided by CDC in the project. The link is

https://www.cdc.gov/coronavirus/2019-ncov/map-data-cases.csv

First of all, we will start our project. You can type the following code on your command panel or terminal to start the project.

ng new read-csv

After the project has been successfully created. We will be creating a service in Angular that will help us to interact with our CSV file. To create service type the following command

cd read-csv

ng g s covid

After the service is created, we will now create an Angular Component file. To create a component file type

ng g c cases-report

After the component has been created. Go to app.component.html and remove all the HTML content from the page, then add the following line of code in the HTML page

<app-cases-report></app-cases-report>

<app-cases-report> is the selector name that you can find in you rcomponent.ts file. The name of the file can be different based on the name of the component that you wrote.

Run the command

ng serve

In your http://localhost:4200/ ,you should see it running like below.

Working with CSV File on Angular

Now let’s go to covid.services.ts file. We will be needing HttpClient module for the project to make HTTP get requests. In order to add HttpClient module, go to your app.module.ts and add

import { HttpClientModule } from ‘@angular/common/http’;

imports: [ HttpClientModule ]

Now In your covid.service.ts file, import HttpClient module

import { HttpClient } from ‘@angular/common/http’;

Make sure you initialize HttpClient from your constructor.

export class CovidService {

covidData = ‘https://www.cdc.gov/coronavirus/2019-ncov/map-data-cases.csv';

constructor(private http: HttpClient) { }

getInfo() {

return this.http.get(this.covidData, {responseType: ‘text’});

}

}

Here, we are basically using get method from Http to read our CSV file.

Now go to your cases-report.component.ts file and write the following code. Make sure you import CovidService in the file.

import { CovidService } from ‘./../covid.service’;

import { Component, OnInit } from ‘@angular/core’;

@Component({

selector: ‘app-cases-report’,

templateUrl: ‘./cases-report.component.html’,

styleUrls: [‘./cases-report.component.css’]

})

export class CasesReportComponent implements OnInit {

covidData: any[] = [];

constructor(private covid: CovidService) { }

ngOnInit() {

this.getData();

}

getData() {

this.covid.getInfo().subscribe(data => {

const list = data.split(‘\n’);

list.forEach( e => {

this.covidData.push(e);

});

});

}

}

Now we have successfully sent our CSV file in an Array of covidData. To display the data on your localhost, go to you cases-report.component.html file and write the following code

<div *ngFor=”let covid of covidData”>

<p> {{ covid }}</p>

</div>

You can now check your local browser and it should load the data as shown in the screenshot below.

That’s all !! we have now successfully read a CSV file in Angular. In the next article, I will write about how to use this data for Visualization.