---
title: "Excel Export - Notes"
enterprise: true
framework: angular
version: "36.1.0"
---

# Excel Export - Notes

Excel notes/comments can be added to exported cells using a callback, exported automatically from the [Notes](https://www.ag-grid.com/angular-data-grid/notes/) feature, or attached to custom content rows.

## Adding Notes to Cells

Use `processNoteCallback` to inject notes during export. The callback is invoked for each exported cell and receives the cell value, column, and row node. Return an `ExcelNote` object to attach a note, `undefined` to keep the default behaviour, or `null` to suppress the note for the current cell.

If a note does not specify an `author`, the Excel document `author` is used. When the document author is not provided, the exporter falls back to `AG Grid`.

#### Excel Export - Basic Notes

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { ContextMenuModule, ExcelExportModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ContextMenuModule,
  ExcelExportModule,
]);
import { OlympicWinner } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="container">
    <div class="controls">
      <button (click)="onBtExport()">Export</button>
    </div>
    <div class="grid-wrapper">
      <ag-grid-angular
        style="width: 100%; height: 100%;"
        [columnDefs]="columnDefs"
        [rowData]="rowData"
        [defaultColDef]="defaultColDef"
        [defaultExcelExportParams]="defaultExcelExportParams"
        (gridReady)="onGridReady($event)"
      />
    </div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi<OlympicWinner>;

  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 180 },
    { field: "country", minWidth: 180 },
    { field: "year", maxWidth: 120 },
    { field: "sport", minWidth: 160 },
    { field: "gold", maxWidth: 120 },
  ];
  rowData: OlympicWinner[] | null = [
    {
      athlete: "Michael Phelps",
      country: "United States",
      year: 2008,
      sport: "Swimming",
      gold: 8,
    },
    {
      athlete: "Usain Bolt",
      country: "Jamaica",
      year: 2008,
      sport: "Athletics",
      gold: 3,
    },
    {
      athlete: "Simone Biles",
      country: "United States",
      year: 2016,
      sport: "Gymnastics",
      gold: 4,
    },
    {
      athlete: "Katie Ledecky",
      country: "United States",
      year: 2016,
      sport: "Swimming",
      gold: 4,
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 120,
  };
  defaultExcelExportParams: ExcelExportParams = {
    author: "Export Bot",
    processNoteCallback: (params) => {
      if (params.column.getColId() === "gold" && Number(params.value) >= 5) {
        return {
          text: `Outstanding medal count (${params.value} gold). Flag for performance review.`,
          author: "Review Team",
        };
      }
      return undefined;
    },
  };

  onBtExport() {
    this.gridApi.exportDataAsExcel();
  }

  onGridReady(params: GridReadyEvent<OlympicWinner>) {
    this.gridApi = params.api;
  }
}
```

[Live example: Excel Export - Basic Notes](https://www.ag-grid.com/examples/excel-export-notes/excel-export-notes-basic/angular)

```ts
<ag-grid-angular
    [defaultExcelExportParams]="defaultExcelExportParams"
    /* other grid options ... */ />

this.defaultExcelExportParams = {
    processNoteCallback: (params) => {
        if (params.column.getColId() === 'gold' && Number(params.value) >= 5) {
            return {
                text: `Outstanding medal count (${params.value} gold).`,
            };
        }
    },
 };
```

## Exporting Grid Notes

When the [Notes](https://www.ag-grid.com/angular-data-grid/notes/) feature is enabled and `notesDataSource` is configured, cell notes are exported automatically as Excel notes/comments. No callback is needed.

#### Excel Export - Grid Notes

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  Note,
  NotesDataSource,
  NotesDataSourceGetNoteParams,
  NotesDataSourceSetNoteParams,
  enableDevValidations,
} from "ag-grid-community";
import {
  ContextMenuModule,
  ExcelExportModule,
  NotesModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ContextMenuModule,
  ExcelExportModule,
  NotesModule,
]);
import { OlympicWinner } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="container">
    <div class="controls">
      <button (click)="onBtExport()">Export</button>
    </div>
    <div class="grid-wrapper">
      <ag-grid-angular
        style="width: 100%; height: 100%;"
        [notesDataSource]="notesDataSource"
        [columnDefs]="columnDefs"
        [rowData]="rowData"
        [getRowId]="getRowId"
        [defaultColDef]="defaultColDef"
        [defaultExcelExportParams]="defaultExcelExportParams"
        (gridReady)="onGridReady($event)"
      />
    </div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi<OlympicWinner>;

  notesDataSource: NotesDataSource | FullWidthNotesDataSource = {
    getNote: (params: NotesDataSourceGetNoteParams) =>
      noteStore.get(getNoteKey(params.rowNode.id!, params.column.getColId())),
    setNote: (params: NotesDataSourceSetNoteParams) => {
      const key = getNoteKey(params.rowNode.id!, params.column.getColId());
      if (params.note === undefined) {
        noteStore.delete(key);
      } else {
        noteStore.set(key, params.note);
      }
    },
  };
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 180 },
    { field: "country", minWidth: 180 },
    { field: "year", maxWidth: 120 },
    { field: "sport", minWidth: 160 },
    { field: "gold", maxWidth: 120 },
  ];
  rowData: OlympicWinner[] | null = [
    {
      id: "1",
      athlete: "Michael Phelps",
      country: "United States",
      year: 2008,
      sport: "Swimming",
      gold: 8,
    },
    {
      id: "2",
      athlete: "Usain Bolt",
      country: "Jamaica",
      year: 2008,
      sport: "Athletics",
      gold: 3,
    },
    {
      id: "3",
      athlete: "Simone Biles",
      country: "United States",
      year: 2016,
      sport: "Gymnastics",
      gold: 4,
    },
    {
      id: "4",
      athlete: "Katie Ledecky",
      country: "United States",
      year: 2016,
      sport: "Swimming",
      gold: 4,
    },
  ];
  getRowId: GetRowIdFunc = ({ data }: GetRowIdParams<OlympicWinner>) => data.id;
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 120,
  };
  defaultExcelExportParams: ExcelExportParams = {
    author: "Portfolio Ops",
  };

  onBtExport() {
    this.gridApi.exportDataAsExcel();
  }

  onGridReady(params: GridReadyEvent<OlympicWinner>) {
    this.gridApi = params.api;
  }
}

const getNoteKey = (rowId: string, colId: string) => `${rowId}::${colId}`;
const noteStore = new Map<string, Note>([
  [
    getNoteKey("1", "athlete"),
    {
      text: "Confirm the athlete biography before publishing the desk report.",
      author: "Maya",
      updatedAt: "29 Mar 2026, 09:15",
    },
  ],
  [
    getNoteKey("3", "country"),
    {
      text: "Check the latest federation naming guidance for this country.",
      updatedAt: "27 Mar 2026, 14:30",
    },
  ],
]);
```

[Live example: Excel Export - Grid Notes](https://www.ag-grid.com/examples/excel-export-notes/excel-export-grid-notes/angular)

### Suppressing Grid Notes

Set `suppressGridNotesExport` to `true` to prevent grid notes from being included in the export. The grid still displays notes, but the exported file will not contain them. Callback-based note injection via `processNoteCallback` still works when this is set.

#### Excel Export - Suppress Grid Notes

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  Note,
  NotesDataSource,
  NotesDataSourceGetNoteParams,
  NotesDataSourceSetNoteParams,
  enableDevValidations,
} from "ag-grid-community";
import {
  ContextMenuModule,
  ExcelExportModule,
  NotesModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ContextMenuModule,
  ExcelExportModule,
  NotesModule,
]);
import { OlympicWinner } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="container">
    <div class="controls">
      <button (click)="onBtExport()">Export</button>
    </div>
    <div class="grid-wrapper">
      <ag-grid-angular
        style="width: 100%; height: 100%;"
        [notesDataSource]="notesDataSource"
        [columnDefs]="columnDefs"
        [rowData]="rowData"
        [getRowId]="getRowId"
        [defaultColDef]="defaultColDef"
        [defaultExcelExportParams]="defaultExcelExportParams"
        (gridReady)="onGridReady($event)"
      />
    </div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi<OlympicWinner>;

  notesDataSource: NotesDataSource | FullWidthNotesDataSource = {
    getNote: (params: NotesDataSourceGetNoteParams) =>
      noteStore.get(getNoteKey(params.rowNode.id!, params.column.getColId())),
    setNote: (params: NotesDataSourceSetNoteParams) => {
      const key = getNoteKey(params.rowNode.id!, params.column.getColId());
      if (params.note === undefined) {
        noteStore.delete(key);
      } else {
        noteStore.set(key, params.note);
      }
    },
  };
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 180 },
    { field: "country", minWidth: 180 },
    { field: "year", maxWidth: 120 },
    { field: "sport", minWidth: 160 },
    { field: "gold", maxWidth: 120 },
  ];
  rowData: OlympicWinner[] | null = [
    {
      id: "1",
      athlete: "Michael Phelps",
      country: "United States",
      year: 2008,
      sport: "Swimming",
      gold: 8,
    },
    {
      id: "2",
      athlete: "Usain Bolt",
      country: "Jamaica",
      year: 2008,
      sport: "Athletics",
      gold: 3,
    },
    {
      id: "3",
      athlete: "Simone Biles",
      country: "United States",
      year: 2016,
      sport: "Gymnastics",
      gold: 4,
    },
    {
      id: "4",
      athlete: "Katie Ledecky",
      country: "United States",
      year: 2016,
      sport: "Swimming",
      gold: 4,
    },
  ];
  getRowId: GetRowIdFunc = ({ data }: GetRowIdParams<OlympicWinner>) => data.id;
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 120,
  };
  defaultExcelExportParams: ExcelExportParams = {
    author: "Portfolio Ops",
    suppressGridNotesExport: true,
  };

  onBtExport() {
    this.gridApi.exportDataAsExcel();
  }

  onGridReady(params: GridReadyEvent<OlympicWinner>) {
    this.gridApi = params.api;
  }
}

const getNoteKey = (rowId: string, colId: string) => `${rowId}::${colId}`;
const noteStore = new Map<string, Note>([
  [
    getNoteKey("1", "athlete"),
    {
      text: "Confirm the athlete biography before publishing the desk report.",
      author: "Maya",
      updatedAt: "29 Mar 2026, 09:15",
    },
  ],
  [
    getNoteKey("3", "country"),
    {
      text: "Check the latest federation naming guidance for this country.",
      updatedAt: "27 Mar 2026, 14:30",
    },
  ],
]);
```

[Live example: Excel Export - Suppress Grid Notes](https://www.ag-grid.com/examples/excel-export-notes/excel-export-suppress-grid-notes/angular)

```ts
<ag-grid-angular
    [defaultExcelExportParams]="defaultExcelExportParams"
    /* other grid options ... */ />

this.defaultExcelExportParams = {
    suppressGridNotesExport: true,
 };
```

### Customising Exported Notes

The `processNoteCallback` can be used to customise existing grid notes before they are exported. For cells that contain grid notes the `processNoteCallback` provides both `excelNote` and `gridNote`.

- `excelNote` - is the note that will be exported to Excel
- `gridNote` - is the source grid note for this cell

The example below shows how the existing `excelNote` text can be updated to include the `updatedAt` value from the underlying `gridNote`.

#### Excel Export - Customising Notes

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  Note,
  NotesDataSource,
  NotesDataSourceGetNoteParams,
  NotesDataSourceSetNoteParams,
  enableDevValidations,
} from "ag-grid-community";
import {
  ContextMenuModule,
  ExcelExportModule,
  NotesModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ContextMenuModule,
  ExcelExportModule,
  NotesModule,
]);
import { OlympicWinner } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="container">
    <div class="controls">
      <button (click)="onBtExport()">Export</button>
    </div>
    <div class="grid-wrapper">
      <ag-grid-angular
        style="width: 100%; height: 100%;"
        [notesDataSource]="notesDataSource"
        [columnDefs]="columnDefs"
        [rowData]="rowData"
        [getRowId]="getRowId"
        [defaultColDef]="defaultColDef"
        [defaultExcelExportParams]="defaultExcelExportParams"
        (gridReady)="onGridReady($event)"
      />
    </div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi<OlympicWinner>;

  notesDataSource: NotesDataSource | FullWidthNotesDataSource = {
    getNote: (params: NotesDataSourceGetNoteParams) =>
      noteStore.get(getNoteKey(params.rowNode.id!, params.column.getColId())),
    setNote: (params: NotesDataSourceSetNoteParams) => {
      const key = getNoteKey(params.rowNode.id!, params.column.getColId());
      if (params.note === undefined) {
        noteStore.delete(key);
      } else {
        noteStore.set(key, params.note);
      }
    },
  };
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 180 },
    { field: "country", minWidth: 180 },
    { field: "year", maxWidth: 120 },
    { field: "sport", minWidth: 160 },
    { field: "gold", maxWidth: 120 },
  ];
  rowData: OlympicWinner[] | null = [
    {
      id: "1",
      athlete: "Michael Phelps",
      country: "United States",
      year: 2008,
      sport: "Swimming",
      gold: 8,
    },
    {
      id: "2",
      athlete: "Usain Bolt",
      country: "Jamaica",
      year: 2008,
      sport: "Athletics",
      gold: 3,
    },
    {
      id: "3",
      athlete: "Simone Biles",
      country: "United States",
      year: 2016,
      sport: "Gymnastics",
      gold: 4,
    },
    {
      id: "4",
      athlete: "Katie Ledecky",
      country: "United States",
      year: 2016,
      sport: "Swimming",
      gold: 4,
    },
  ];
  getRowId: GetRowIdFunc = ({ data }: GetRowIdParams<OlympicWinner>) => data.id;
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 120,
  };
  defaultExcelExportParams: ExcelExportParams = {
    author: "Portfolio Ops",
    processNoteCallback: (params) => {
      if (params.excelNote) {
        return {
          ...params.excelNote,
          text: `${params.excelNote.text}\n\nUpdated: ${params.gridNote?.updatedAt ?? "Not recorded"}`,
        };
      }
      // Export a note to Excel for which there is not an existing gridNote
      if (params.column.getColId() === "gold" && Number(params.value) >= 8) {
        return {
          text: "Flag this medal count for the performance review pack.",
        };
      }
    },
  };

  onBtExport() {
    this.gridApi.exportDataAsExcel();
  }

  onGridReady(params: GridReadyEvent<OlympicWinner>) {
    this.gridApi = params.api;
  }
}

const getNoteKey = (rowId: string, colId: string) => `${rowId}::${colId}`;
const noteStore = new Map<string, Note>([
  [
    getNoteKey("1", "athlete"),
    {
      text: "Confirm the athlete biography before publishing the desk report.",
      author: "Maya",
      updatedAt: "29 Mar 2026, 09:15",
    },
  ],
  [
    getNoteKey("3", "country"),
    {
      text: "Check the latest federation naming guidance for this country.",
      updatedAt: "27 Mar 2026, 14:30",
    },
  ],
]);
```

[Live example: Excel Export - Customising Notes](https://www.ag-grid.com/examples/excel-export-notes/excel-export-notes-customisation/angular)

```ts
<ag-grid-angular
    [notesDataSource]="notesDataSource"
    [defaultExcelExportParams]="defaultExcelExportParams"
    /* other grid options ... */ />

notesDataSource;
this.defaultExcelExportParams = {
    processNoteCallback: (params) => {
        if (params.excelNote) {
            return {
                ...params.excelNote,
                text: `${params.excelNote.text}\n\nUpdated: ${params.gridNote?.updatedAt ?? 'Not recorded'}`,
            };
        }
    },
};
```

## Hiding Author

By default, the author name is prepended as bold text in the Excel note body (matching Excel's native behaviour). Set `suppressPrependAuthorToNotes` to `true` to export only the note text. The author is still stored in the Excel workbook's note metadata.

#### Excel Export - Hide Author

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  Note,
  NotesDataSource,
  NotesDataSourceGetNoteParams,
  NotesDataSourceSetNoteParams,
  enableDevValidations,
} from "ag-grid-community";
import {
  ContextMenuModule,
  ExcelExportModule,
  NotesModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ContextMenuModule,
  ExcelExportModule,
  NotesModule,
]);
import { OlympicWinner } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="container">
    <div class="controls">
      <button (click)="onBtExport()">Export</button>
    </div>
    <div class="grid-wrapper">
      <ag-grid-angular
        style="width: 100%; height: 100%;"
        [notesDataSource]="notesDataSource"
        [columnDefs]="columnDefs"
        [rowData]="rowData"
        [getRowId]="getRowId"
        [defaultColDef]="defaultColDef"
        [defaultExcelExportParams]="defaultExcelExportParams"
        (gridReady)="onGridReady($event)"
      />
    </div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi<OlympicWinner>;

  notesDataSource: NotesDataSource | FullWidthNotesDataSource = {
    getNote: (params: NotesDataSourceGetNoteParams) =>
      noteStore.get(getNoteKey(params.rowNode.id!, params.column.getColId())),
    setNote: (params: NotesDataSourceSetNoteParams) => {
      const key = getNoteKey(params.rowNode.id!, params.column.getColId());
      if (params.note === undefined) {
        noteStore.delete(key);
      } else {
        noteStore.set(key, params.note);
      }
    },
  };
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 180 },
    { field: "country", minWidth: 180 },
    { field: "year", maxWidth: 120 },
    { field: "sport", minWidth: 160 },
    { field: "gold", maxWidth: 120 },
  ];
  rowData: OlympicWinner[] | null = [
    {
      id: "1",
      athlete: "Michael Phelps",
      country: "United States",
      year: 2008,
      sport: "Swimming",
      gold: 8,
    },
    {
      id: "2",
      athlete: "Usain Bolt",
      country: "Jamaica",
      year: 2008,
      sport: "Athletics",
      gold: 3,
    },
    {
      id: "3",
      athlete: "Simone Biles",
      country: "United States",
      year: 2016,
      sport: "Gymnastics",
      gold: 4,
    },
    {
      id: "4",
      athlete: "Katie Ledecky",
      country: "United States",
      year: 2016,
      sport: "Swimming",
      gold: 4,
    },
  ];
  getRowId: GetRowIdFunc = ({ data }: GetRowIdParams<OlympicWinner>) => data.id;
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 120,
  };
  defaultExcelExportParams: ExcelExportParams = {
    author: "Portfolio Ops",
    suppressPrependAuthorToNotes: true,
  };

  onBtExport() {
    this.gridApi.exportDataAsExcel();
  }

  onGridReady(params: GridReadyEvent<OlympicWinner>) {
    this.gridApi = params.api;
  }
}

const getNoteKey = (rowId: string, colId: string) => `${rowId}::${colId}`;
const noteStore = new Map<string, Note>([
  [
    getNoteKey("1", "athlete"),
    {
      text: "Confirm the athlete biography before publishing the desk report.",
      author: "Maya",
      updatedAt: "29 Mar 2026, 09:15",
    },
  ],
  [
    getNoteKey("3", "country"),
    {
      text: "Check the latest federation naming guidance for this country.",
      updatedAt: "27 Mar 2026, 14:30",
    },
  ],
]);
```

[Live example: Excel Export - Hide Author](https://www.ag-grid.com/examples/excel-export-notes/excel-export-hide-author/angular)

```ts
<ag-grid-angular
    [defaultExcelExportParams]="defaultExcelExportParams"
    /* other grid options ... */ />

this.defaultExcelExportParams = {
    author: 'Portfolio Ops',
    suppressPrependAuthorToNotes: true,
 };
```

## Adding Notes to Extra Content

Cells in [extra content](https://www.ag-grid.com/angular-data-grid/excel-export-extra-content/) rows can carry Excel notes via `ExcelCell.note`.

#### Excel Export - Notes on Extra Content

```ts
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  ExcelRow,
  ExcelStyle,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { ExcelExportModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule, ExcelExportModule]);
import { OlympicWinner } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="container">
    <div class="controls">
      <button (click)="onBtExport()">Export</button>
    </div>
    <div class="grid-wrapper">
      <ag-grid-angular
        style="width: 100%; height: 100%;"
        [columnDefs]="columnDefs"
        [rowData]="rowData"
        [defaultColDef]="defaultColDef"
        [excelStyles]="excelStyles"
        [defaultExcelExportParams]="defaultExcelExportParams"
        (gridReady)="onGridReady($event)"
      />
    </div>
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi<OlympicWinner>;

  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 180 },
    { field: "country", minWidth: 180 },
    { field: "year", maxWidth: 120 },
    { field: "sport", minWidth: 160 },
    { field: "gold", maxWidth: 120 },
  ];
  rowData: OlympicWinner[] | null = [
    {
      athlete: "Michael Phelps",
      country: "United States",
      year: 2008,
      sport: "Swimming",
      gold: 8,
    },
    {
      athlete: "Usain Bolt",
      country: "Jamaica",
      year: 2008,
      sport: "Athletics",
      gold: 3,
    },
    {
      athlete: "Simone Biles",
      country: "United States",
      year: 2016,
      sport: "Gymnastics",
      gold: 4,
    },
    {
      athlete: "Katie Ledecky",
      country: "United States",
      year: 2016,
      sport: "Swimming",
      gold: 4,
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 120,
  };
  excelStyles: ExcelStyle[] = [
    {
      id: "coverHeading",
      font: {
        bold: true,
        size: 14,
      },
    },
  ];
  defaultExcelExportParams: ExcelExportParams = {
    author: "Portfolio Ops",
    prependContent: extraContent,
  };

  onBtExport() {
    this.gridApi.exportDataAsExcel();
  }

  onGridReady(params: GridReadyEvent<OlympicWinner>) {
    this.gridApi = params.api;
  }
}

const extraContent: ExcelRow[] = [
  {
    cells: [
      {
        data: { type: "String", value: "Export Summary" },
        styleId: "coverHeading",
        note: {
          text: "This note is added only during export through ExcelCell.note.",
        },
      },
    ],
  },
  { cells: [] },
];
```

[Live example: Excel Export - Notes on Extra Content](https://www.ag-grid.com/examples/excel-export-notes/excel-export-notes-extra-content/angular)

```ts
<ag-grid-angular
    [defaultExcelExportParams]="defaultExcelExportParams"
    /* other grid options ... */ />

this.defaultExcelExportParams = {
    prependContent: [
        {
            cells: [
                {
                    data: { type: 'String', value: 'Export Summary' },
                    note: {
                        text: 'This note is added only during export through ExcelCell.note.',
                    },
                },
            ],
        },
    ],
};
```

## API

### ExcelNote

Properties available on the `ExcelNote` interface.

See [Notes](https://www.ag-grid.com/angular-data-grid/excel-export-notes/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `text` | `string` | Yes |  | The body text to export in the Excel note/comment. |
| `author` | `string` |  |  | Optional author name displayed in the exported Excel note. When omitted, the document `author` is used. |

### ProcessNoteForExportParams

Properties available on the `ProcessNoteForExportParams&lt;TData = any, TContext = any&gt;` interface.

See [Notes](https://www.ag-grid.com/angular-data-grid/excel-export-notes/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `gridNote` | `Note` |  |  | The grid note resolved for the current cell, when the Notes feature is available. |
| `excelNote` | `ExcelNote` |  |  | The Excel note/comment value derived from `gridNote` when automatic note export is enabled. |
| `value` | `any` |  |  | The raw cell value before any formatting or processing. |
| `accumulatedRowIndex` | `number` |  |  | The zero-based row index in the exported output, including any prepended content rows. Only populated for file export flows (`'excel'`, `'csv'`); omitted for clipboard flows. |
| `node` | [`IRowNode \| null`](https://www.ag-grid.com/angular-data-grid/row-object/) |  |  | The row node for the cell. May be `null` or `undefined` for clipboard flows when no row is associated. |
| `column` | [`Column`](https://www.ag-grid.com/angular-data-grid/column-object/) |  |  | The column for the cell. |
| `type` | `string` |  |  | The operation that triggered the callback |
| `parseValue` | `Function` |  |  | Utility function to parse a value using the column's `colDef.valueParser` |
| `formatValue` | `Function` |  |  | Utility function to format a value using the column's `colDef.valueFormatter` |
| `api` | [`GridApi`](https://www.ag-grid.com/angular-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/angular-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |