Mostrar dados de um csv na tela - Angular

Oi Thiago, tudo bem?

Desculpe a demora em retornar.

Entendo sua dificuldade em listar dados de um arquivo CSV no Angular, mas fique tranquilo, existem algumas formas de realizar essa tarefa.

Uma opção é utilizar a biblioteca Papa Parse, que é uma biblioteca de análise de CSV em JavaScript, capaz de lidar com arquivos grandes e complexos. Essa biblioteca pode ser instalada via npm e importada no seu componente Angular, conforme exemplo abaixo:

npm install papaparse

import { Component } from '@angular/core';
import * as Papa from 'papaparse';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  csvData: any[] = [];
  headerRow: any[] = [];

  constructor() {
    let csvFilePath = './assets/data.csv';
    let options = {
      delimiter: ',', // delimitador do arquivo CSV
      header: true, // informa que a primeira linha é o cabeçalho
      skipEmptyLines: true, // pula linhas vazias
      complete: (results, file) => {
        console.log('Parsed: ', results);
        this.headerRow = results.meta.fields;
        this.csvData = results.data;
      }
    };

    Papa.parse(csvFilePath, options);
  }
}

No exemplo acima, importamos a biblioteca Papa Parse e utilizamos seu método parse para ler o arquivo CSV. Definimos algumas opções, como o delimitador do arquivo, informamos que a primeira linha é o cabeçalho e pulamos linhas vazias. No método complete, definimos o que deve ser feito após a leitura do arquivo. Neste caso, salvamos o cabeçalho e os dados em variáveis para exibir na tela.

Outra opção é utilizar a biblioteca CSV-Parser, que é uma outra biblioteca de análise de CSV em JavaScript. Ela pode ser instalada via npm e importada no seu componente Angular, conforme exemplo abaixo:

npm install csv-parser

import { Component } from '@angular/core';
import * as csvParser from 'csv-parser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  csvData: any[] = [];
  headerRow: any[] = [];

  constructor() {
    let csvFilePath = './assets/data.csv';
    let stream = fs.createReadStream(csvFilePath);

    stream.pipe(csvParser())
      .on('headers', (headers) => {
        console.log(`CSV headers: ${headers}`);
        this.headerRow = headers;
      })
      .on('data', (data) => {
        console.log(`CSV data: ${JSON.stringify(data)}`);
        this.csvData.push(data);
      })
      .on('end', () => {
        console.log('CSV file successfully processed');
      });
  }
}

No exemplo acima, importamos a biblioteca CSV-Parser e utilizamos seu método pipe para ler o arquivo CSV. Em seguida, definimos o que deve ser feito após a leitura do arquivo. No evento headers, salvamos o cabeçalho em uma variável. No evento data, salvamos cada linha de dados em uma variável para exibir na tela. E no evento end, definimos o que deve ser feito após o final da leitura do arquivo.

Espero que essas opções possam te ajudar.

Um abraço e bons estudos.