DEV Community: Tejas Naigaonkar

Export to excel in Angular app without using any library

Tejas Naigaonkar — Sat, 23 Aug 2025 17:14:01 +0000

Code to implement export to excel in Angular app.

It’s gonna be typesafe code.

interface ExcelRow<T> {[key: string]: T;}

interface Column<T> {
  header: string;
  key: keyof T;
  type: 'string' | 'number';
}

exportToExcel() {
    const maxLength: Record<string, number> = this.columns.reduce(
      (acc: Record<string, number>, col: Column<ExcelRow<number | string>>) => {
        acc[col.key] = 0;
        return acc;
      },
      {}
    );

    this.data.forEach((data: ExcelRow<number | string>) => {
      this.columns.forEach((column: Column<ExcelRow<number | string>>) => {
        const val: string | number = data[column.key];
        const length: number = ('' + val).toString().length;
        maxLength[column.key] = Math.max(maxLength[column.key], length);
      });
    });

    const colWidths: Record<string, string> = this.columns.reduce(
      (acc: Record<string, string>, col: Column<ExcelRow<number | string>>) => {
        acc[col.key] = `${maxLength[col.key] * 80}%`;
        return acc;
      },
      {}
    );

    let htmlContent = `
      <html>
        <head>
          <meta charset="UTF-8">
        </head>
        <body>
          <table border="1">
            <tr>
              ${this.columns
                .map(
                  (column: Column<ExcelRow<number | string>>) =>
                    `<th style="width: ${colWidths[column.key]}">${
                      column.header
                    }</th>`
                )
                .join('')}
    `;

    this.data.forEach((data: ExcelRow<number | string>) => {
      htmlContent += `
            </tr>
            ${this.columns
              .map(
                (column: Column<ExcelRow<number | string>>) => `
          <td>${data[column.key]}</td>
        `
              )
              .join('')}
    `;
    });

    htmlContent += `
    </table>
    </body>
  </html>
  `;

Example column and data to export -

  data: ExcelRow<number | string>[] = [
    {
      id: 7,
      name: 'John Doe',
      work: 'Developer',
      address: '7, Village Road, KA',
    },
    {
      id: 8,
      name: 'Alice',
      work: 'QA Engg',
      address: '7, Village Road, LA',
    },
    {
      id: 9,
      name: 'Maya',
      work: 'Manager',
      address: '7, Village Road, MH',
    },
  ];

  columns: Column<ExcelRow<number | string>>[] = [
    {
      header: 'ID',
      key: 'id',
      type: 'number',
    },
    {
      header: 'Name',
      key: 'name',
      type: 'string',
    },
    {
      header: 'Work',
      key: 'work',
      type: 'string',
    },
    {
      header: 'Address',
      key: 'address',
      type: 'string',
    },
  ];

Follow the below example implemented in stackblitz for exporting array of objects without using any library.

https://stackblitz.com/edit/angular-tooxsa9w

Generic code to export array of objects (table data) into excel using XLSX library

Tejas Naigaonkar — Sat, 23 Aug 2025 10:00:20 +0000

Consider we have an array of objects which is to exported into an excel using XLSX library we can use some simple code like below -

import * as XLSX from 'xlsx';

exportAsExcelFile(data: any[], fileName: string): void {
    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
    const workbook: XLSX.WorkBook = {
      Sheets: { 'data': worksheet },
      SheetNames: ['data']
    };
  XLSX.writeFile(workbook, `${filename}.xlsx`);
}

Issues with above code

No type safety
Exported excel displays data in default cell width. If a cell contains data that exceeds the default cell width, it does not look good.

Let's solve above issues -

Use below interface and the code
interface ExcelRow {[key: string]: string;}

import * as XLSX from 'xlsx';

exportAsExcelFile(data: ExcelRow[], fileName: string): void {
    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(data);
    const workbook: XLSX.WorkBook = {
      Sheets: { data: worksheet },
      SheetNames: ['data'],
    };

    const columnWidths: XLSX.ColInfo[] = Object.keys(data[0]).map(
      (key: keyof ExcelRow) => {
        const maxLength = Math.max(
          ('' + key).length,
          ...data.map((row: ExcelRow) =>
            row[key] ? row[key].toString().length : 0
          )
        );
        return { wch: maxLength + 2 }; // Adding some padding
      }
    );

    worksheet['!cols'] = columnWidths;

    XLSX.writeFile(workbook, `${fileName}.xlsx`);
  }

We added type safety and the exported excel has cell width adjusted dynamically as per the cell data.

We can use method exportAsExcelFile() by passing data like below in our component

const data: ExcelRow[] = [
      {
        ID: '007',
        NAME: 'John Doe',
        Work: 'Developer',
        Address: '7, Village Road, KA'
      },
      {
        ID: '008',
        NAME: 'Alice',
        Work: 'QA Engg',
        Address: '7, Village Road, LA'
      },
      {
        ID: '009',
        NAME: 'Maya',
        Work: 'Manager',
        Address: '7, Village Road, MH'
      },
    ];
    this.exportAsExcelFile(data, 'Employee data');

Above code works. Notice that the above code is available in a component; what if

This export functionality needs to be used in many other components in the app.
The type of the data value in the ExcelRowcan be something other than string; it can be a number, null etc.

This can be achieved by

Copy pasting the same code in all component wherever it is required - works but not a good standard
Create a utility class and use this code which then can be used by components who need it. And using generic type of data in ExcelRow

Let's create a utility method.

interface ExcelRow<T> {[key: string]: T;}

  exportAsExcelFile<T>(data: ExcelRow<T>[], fileName: string): void {
    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(data);
    const workbook: XLSX.WorkBook = {
      Sheets: { data: worksheet },
      SheetNames: ['data'],
    };

    const columnWidths: XLSX.ColInfo[] = Object.keys(data[0]).map(
      (key: keyof ExcelRow<T>) => {
        const maxLength = Math.max(
          ('' + key).length,
          ...data.map((row: ExcelRow<T>) =>
            row[key] ? row[key].toString().length : 0
          )
        );
        return { wch: maxLength + 2 }; // Adding some padding
      }
    );

    worksheet['!cols'] = columnWidths;

    XLSX.writeFile(workbook, `${fileName}.xlsx`);
  }

Below are the examples of data -

    const data: ExcelRow<string | number | null>[] = [
      {
        ID: 7,
        NAME: 'John Doe',
        Work: 'Developer',
        Address: '7, Village Road, KA'
      },
      {
        ID: 8,
        NAME: 'Alice',
        Work: 'QA Engg',
        Address: '7, Village Road, LA'
      },
      {
        ID: '009',
        NAME: 'Maya',
        Work: 'Manager',
        Address: null
      },
    ];

    const data2: ExcelRow<number>[] = [
      {
        'Student ID': 1,
        Score: 90,
      },
      {
        'Student ID': 2,
        Score: 95,
      },
    ];

This way we have a utility that can be used to export array of objects into excel using XLSX library.

I hope this helps.

Thanks,
Jastya!

Tic Toc Toe

Tejas Naigaonkar — Thu, 24 Jul 2025 06:55:35 +0000

Click the link to play Tic-Tac-Toe
https://tic-tac-j522t95x1-tejas-projects-d428ea49.vercel.app/

RxJs: Does my observable gets unsubscribed if its source observable is unsubscribed?

Tejas Naigaonkar — Tue, 24 Jun 2025 10:51:49 +0000

I have subscribed to an observable - MyObservable.
Source observable of MyObservable is SourceObservable.

Question - Does the subscription to MyObservable is closed (unsubscribed) if the subscription to SourceObservable is closed?

Answer is Yes.

Let's verify this with code.

We'll create a method that returns an observable

const mySourceObservable = (): Observable<number> =>
  interval(2000).pipe(
    takeUntil(interval(5000)),
    map((val: number) => val * 2)
  );

Subscribe to the observable returned by above method and log the values emitted in the console

const subscription = mySourceObservable().subscribe((val: number) =>
  console.log(val)
);

Code to check if the subscription is closed

console.log(subscription);

setTimeout((_) => console.log(subscription), 8000);

Once the subscription to the source observable which is interval(2000) is closed, the subscription to the observable returned by method mySourceObservable() is also closed.

Working solution with explanation using comments is available below, do check out - https://stackblitz.com/edit/rxjs-playground-test-gxhfpsaf?file=index.ts

I hope this helps.

Let me your thoughts.

Best,
Jastya!