How to Upload and Download CSV Files With Angular

Data sets are extremely essential in building API models and various business processes. This is why importing and exporting CSV is an often-needed functionality.

In this tutorial, you will learn how to download and import a CSV file within an Angular app. We'll be working with a CSV file that contains employee details. The code will be written in TypeScript. 

Before you start, you'll need to set up a new Angular environment, create a new workspace with an initial application, and start serving. A step-by-step guide to creating the boilerplate for your Angular app can be found in the official tutorial.

Here's the folder structure of the boilerplate application:

Root<br>-- src<br>---- app<br>------ app-routing.module.ts<br>------ app.component.css<br>------ app.component.html<br>------ app.component.ts<br>------ app.module.ts<br>---- models<br>---- services<br>------ csv.services.ts<br>---- index.html<br>---- main.ts<br>---- styles.css<br>

1. Create a Simple Model

Firstly, let's create a simple class to model the employee. This model will be consumed by the Angular components.

The model for holding the employee details is given below. This is just a basic model with the employee's name, email, and city. 

export class User {<br>  name: string;<br>  email: string;<br>  city: string;<br>}<br>

2. Build the Service

Angular applications have a modular structure. This makes the application robust and easy to maintain. One of the primary rules of any Angular application is that components must not be allowed to save or fetch data directly. That is why you have to make use of services to access and present data. In our use case, we require a service for downloading and importing CSV data.

Our service file is csv.services.ts. 

Once the service is created, it can be injected into any component. Before making the function that will take the contents of a file in the form of a .

Set the data:text/csv.

Automatically trigger the tag. The input tag comes with properties like [accept], and type has to be [accept] has to be (change) will call the $event that has properties with the contents of the file.

The event.target.files, where text() from the file. Remember, the method for reading the file should be asynchronous, which is why we will use async.  The simple piece of code for reading text from a CSV file is here:

private async getTextFromFile(event: any) {<br>    const file: File = event.target.files[0];<br>    let fileContent = await file.text();<br>    <br>    return fileContent;<br>}<br>

Copy after login

Once the text content is extracted from the CSV file, we can use the service defined in step 2. 

public async importDataFromCSV(event: any) {<br>    let fileContent = await this.getTextFromFile(event);<br>    this.importedData = this._csvService.importDataFromCSV(fileContent);<br>}<br>

Copy after login

And the above function can be linked with a button in app.component.html.

<div>Export simple data</div><br><input<br>  #fileUploadSimple<br>  [accept]="'.csv'"<br>  type="file"<br>  class="file-input"<br>  (change)="importDataFromCSV($event)"<br>  hidden="true"<br>/><br><button (click)="fileUploadSimple.click()">Import from csv</button><br><br /><br /><br>

Copy after login

4. Integrating the Whole Application

Now, it's time to build app.module.ts. This is where all the providers, imports, declarations, and the bootstrap component will be registered. 

import { NgModule } from '@angular/core';<br>import { FormsModule } from '@angular/forms';<br>import { BrowserModule } from '@angular/platform-browser';<br><br>import { CsvService } from '../services/csv.services';<br>import { AppRoutingModule } from './app-routing.module';<br>import { AppComponent } from './app.component';<br><br>@NgModule({<br>  declarations: [AppComponent],<br>  imports: [BrowserModule, AppRoutingModule, FormsModule],<br>  providers: [CsvService],<br>  bootstrap: [AppComponent],<br>})<br>export class AppModule {}<br>

Copy after login

With this change, you will be able to see the following screen.

Live Demo

Conclusion

In this post, you saw how to upload and download CSV data, and how to parse CSV data into and out of a text file. 

The above is the detailed content of How to Upload and Download CSV Files With Angular. For more information, please follow other related articles on the PHP Chinese website!