Angular

Integrate TabularJS into an Angular application using a standalone component and a template reference to parse spreadsheet files in the browser.

Installation

npm install tabularjs

Standalone Component

Use a template reference variable (#fileInput) to trigger the hidden file input without needing ViewChild.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import tabularjs from 'tabularjs';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [CommonModule],
    template: `
        <input #fileInput type="file" (change)="handleFile($event)" style="display: none" />
        <button (click)="fileInput.click()">Upload Spreadsheet</button>
        <pre *ngIf="data">{{ data | json }}</pre>
    `
})
export class AppComponent {
    data: any = null;

    async handleFile(event: Event) {
        const input = event.target as HTMLInputElement;
        const file = input.files?.[0];
        if (file) {
            this.data = await tabularjs(file);
        }
    }
}

With ViewChild

Prefer programmatic access to the input element via ViewChild?

import { Component, ViewChild, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import tabularjs from 'tabularjs';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [CommonModule],
    template: `
        <input #fileInput type="file" (change)="handleFile($event)" style="display: none" />
        <button (click)="openPicker()">Upload Spreadsheet</button>
        <pre *ngIf="data">{{ data | json }}</pre>
    `
})
export class AppComponent {
    @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;
    data: any = null;

    openPicker() {
        this.fileInput.nativeElement.click();
    }

    async handleFile(event: Event) {
        const input = event.target as HTMLInputElement;
        const file = input.files?.[0];
        if (file) {
            this.data = await tabularjs(file);
        }
    }
}