|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Comment in Angular Spreadsheet component | Syncfusion |
| 4 | +description: Learn here all about Comment feature in Syncfusion Angular Spreadsheet component of Syncfusion Essential JS 2 and more. |
| 5 | +platform: document-processing |
| 6 | +control: Comment |
| 7 | +documentation: ug |
| 8 | +--- |
| 9 | + |
| 10 | +# Comment in Angular Spreadsheet component |
| 11 | +The **Comment** feature allows you to add feedback to cells without changing their values, enabling contextual discussions through threaded **replies**. Unlike [Notes](./notes), Comment include advanced review tools such as **resolve** and **reopen** to track status, plus an optional **Comments Review Pane** for browsing and managing threads. |
| 12 | + |
| 13 | +Cells with comment display a small comment indicator; hover to preview the comment editor. This provides a clear, collaborative workflow while keeping data intact. |
| 14 | + |
| 15 | + |
| 16 | + |
| 17 | +## Author identity |
| 18 | +The Syncfusion Spreadsheet does not automatically track user identity. To tag new comments and replies with an author name, set the `author` property when initializing the Spreadsheet. |
| 19 | + |
| 20 | +```ts |
| 21 | + import { Component } from '@angular/core'; |
| 22 | + import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet'; |
| 23 | + |
| 24 | + @Component({ |
| 25 | + selector: 'app-root', |
| 26 | + standalone: true, |
| 27 | + imports: [SpreadsheetAllModule], |
| 28 | + // Set the author name. If not set, "Guest User" will be shown by default.. |
| 29 | + template: `<ejs-spreadsheet [author]=author></ejs-spreadsheet>` |
| 30 | + }) |
| 31 | + export class AppComponent { |
| 32 | + // Place the Author Name Here |
| 33 | + public author: string = 'Author Name'; |
| 34 | + } |
| 35 | +``` |
| 36 | +>If the author property is not set, "Guest User" will be displayed as the author for comment and replies by default. |
| 37 | +
|
| 38 | +## Adding a comment |
| 39 | +You can add a **comment** to a cell in several ways: |
| 40 | +* **Context menu**: Right-click the target cell and select **"New Comment"**. |
| 41 | +* **Ribbon**: Go to **Review > Comment > New Comment**. |
| 42 | +* **Keyboard shortcut**: Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F2</kbd> to open the comment editor for the active cell. |
| 43 | +* **Programmatically**: |
| 44 | + * Use the `updateCell` method with the comment model to add a comment to a specific cell. |
| 45 | + * Bind comments via code-behind during initial load by associating the comment model with the cell model. |
| 46 | + |
| 47 | +The image below shows that once a comment is posted, the cell displays an indicator, and the comment can be previewed on hover. |
| 48 | + |
| 49 | + |
| 50 | + |
| 51 | +## Adding a reply |
| 52 | +You can add one or more replies to an existing comment to provide additional details or answers: |
| 53 | +* **Context menu**: Right-click the cell that already has a comment, select **Comment > New Reply**, enter your reply, and click **Post**. |
| 54 | +* **Ribbon**: Go to **Review > Comment > New Comment** on a cell that contains a comment. This opens the comment editor in **reply mode**. |
| 55 | +* **Comment editor**: Open the comment editor by hovering over the comment indicator, type your reply, and click **Post**. |
| 56 | +* **Keyboard shortcut**: Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F2</kbd> on a cell that contains a comment to open the comment editor in reply mode. |
| 57 | + |
| 58 | +After posting, the replies appear under the first comment in the comment editor. |
| 59 | + |
| 60 | + |
| 61 | + |
| 62 | +## Editing a comment |
| 63 | +You can edit the content of a comment or its replies directly within the comment editor. |
| 64 | + |
| 65 | +* **Edit first comment**: In the comment editor. Click the **"⋯" (More thread actions)** menu in the header, select the **Edit Comment**, modify the text and click **Post**. |
| 66 | +* **Edit a reply comment**: In the comment editor, hover over the specific reply, click the **"⋯" (More actions)**, select the **Edit Comment**, modify the text and click **Post**. |
| 67 | + |
| 68 | + |
| 69 | + |
| 70 | +## Resolve and Reopen |
| 71 | +The **Resolve thread** option marks a comment thread as completed when the discussion or issue is addressed. When a thread is resolved, its background color changes to indicate the resolved state, and the reply input box and reply menu actions are hidden. Use **Reopen** to restore the comment if further discussion is needed. |
| 72 | + |
| 73 | +### Resolve a comment |
| 74 | +* In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Resolve Thread**. |
| 75 | + |
| 76 | +### Reopen a comment |
| 77 | +* In the comment editor, click the **Reopen** button in the header to make the thread active again. |
| 78 | + |
| 79 | + |
| 80 | + |
| 81 | +You can also use the `isResolved` property in the comment model when initializing or updating comments programmatically. |
| 82 | + |
| 83 | +**Example: Using `isResolved` property in the comment model with the `updateCell` method** |
| 84 | + |
| 85 | +```ts |
| 86 | +// Update a cell with a comment using the updateCell method |
| 87 | + this.spreadsheetObj.updateCell({ |
| 88 | + comment: { |
| 89 | + author: 'Chistoper', text: 'Are you completed the report', |
| 90 | + createdTime: 'January 03, 2026 at 5:00 PM', |
| 91 | + // Set to true to mark the thread as resolved; false keeps it active |
| 92 | + isResolved: false, |
| 93 | + replies: [{ author: 'John', text: 'Yes, completed', |
| 94 | + createdTime: 'January 03, 2026 at 7:00 PM' }] |
| 95 | + } |
| 96 | + }, 'Sheet1!D5'); |
| 97 | +``` |
| 98 | + |
| 99 | +## Deleting a comment or reply |
| 100 | +You can delete either a specific reply or an entire comment thread (including all replies) using the following options: |
| 101 | + |
| 102 | +### Deleting a comment thread |
| 103 | +* **Context menu**: Right-click the cell that contains the comment and select **Comment > Delete Comment**. |
| 104 | +* **Ribbon**: Go to **Review > Comment > Delete Comment** on a cell that contains the comment. |
| 105 | +* **Comment editor**: In the comment editor, click the **"⋯" (More thread actions)** menu in the header and select **Delete Thread** for an active comment or use the **Delete Thread** button in header for a resolved comment. |
| 106 | + |
| 107 | +Deleting a thread removes the comment and all its replies from the cell. |
| 108 | + |
| 109 | + |
| 110 | + |
| 111 | +### Delete a reply |
| 112 | +In the comment editor, hover over the reply and click the **"⋯" (More actions)** menu then select **Delete Comment**. |
| 113 | + |
| 114 | + |
| 115 | + |
| 116 | +## Next and Previous Comment |
| 117 | +The **Review > Comment > Next Comment and Previous Comment** options in the ribbon allow you to quickly navigate between cells that contain comments: |
| 118 | + |
| 119 | +* **Next Comment**: Moves to the next cell with a comment. |
| 120 | +* **Previous Comment**: Moves to the previous cell with a comment. |
| 121 | + |
| 122 | +Navigation starts within the active sheet. When all comments in the active sheet have been visited (end or start reached), the navigation automatically continues to the next or previous sheet that contains comments. This ensures you can review all comments across the workbook without manually switching sheets. |
| 123 | + |
| 124 | + |
| 125 | + |
| 126 | +## Comments review pane |
| 127 | +The **"Comments" review pane** provides a centralized view of all comments in the active sheet, making it easier to manage discussions without switching between individual cells. It offers filtering, inline actions, and navigation, ensuring an efficient review workflow across the workbook. |
| 128 | + |
| 129 | +You can show or hide the "Comments" review pane using: |
| 130 | + |
| 131 | +* **Ribbon**: Go to **Review > Comment > Show Comments**. |
| 132 | +* **Property**: Set the `showCommentsPane` property to true when initializing the Spreadsheet. By default, this property is **false**. |
| 133 | + |
| 134 | + |
| 135 | + |
| 136 | +### Features of the comments review pane |
| 137 | +The "Comments" review pane is rendered within the spreadsheet interface to provide a dedicated space for managing comments efficiently. It acts as a centralized hub where you can view all comment threads, perform actions, and keep discussions organized without navigating cell by cell. |
| 138 | + |
| 139 | +The "Comments" review pane allows you to: |
| 140 | + |
| 141 | +* Add new comment using the **New** button. |
| 142 | +* Filter comments by **All**, **Active**, or **Resolved** to view specific comment threads. |
| 143 | +* Navigate between comments and synchronize selection with the corresponding cells. |
| 144 | +* Perform actions such as: |
| 145 | + * **Reply** – Add replies directly from the review pane. |
| 146 | + * **Edit** – Modify the text of a comment or reply. |
| 147 | + * **Delete** – Remove a reply or an entire thread. |
| 148 | + * **Resolve/Reopen** – Change the status of a comment. |
| 149 | + |
| 150 | +When the review pane is open, all actions performed in the review pane or in the cell’s comment editor are synchronized: |
| 151 | + |
| 152 | +* Selecting a comment in the review pane highlights the corresponding cell in the sheet. |
| 153 | +* Selecting a cell with a comment focuses the respective comment thread in the review pane. |
| 154 | +* Actions such as **Reply**, **Edit**, **Delete**, and **Resolve/Reopen** update both the pane and the cell comment editor instantly, ensuring consistency across the UI. |
| 155 | +* The review pane dynamically updates when comments are added, deleted, or resolved, so you always see the latest state without refreshing. |
| 156 | + |
| 157 | +## Saving a Workbook with Comments |
| 158 | +You can save spreadsheet data along with **comments** using **File > Save As > Microsoft Excel(.xlsx)**. |
| 159 | +- **MS Excel (.xlsx)** - Preserves all **threaded comments** (modern comments). |
| 160 | + |
| 161 | +> Comments are **not included** when exporting to **.xls**, **.csv**, and **.pdf**. |
| 162 | +
|
| 163 | +### Why comments are not saved in `.xls` |
| 164 | +The **.xls** format is based on the older Excel binary structure (BIFF8), which does not support modern features like **threaded comments**. |
| 165 | +Threaded comments introduced in newer Excel versions require the **Open XML** structure used by `.xlsx`. |
| 166 | + |
| 167 | +> To retain threaded comments, always save the workbook in **.xlsx** format. |
| 168 | +
|
| 169 | +## Bind Comments via code-behind |
| 170 | +You can bind **comment thread** to cells at initial load by providing a `comment` object in the cell model. Each cell supports **per comment thread**, which can include: |
| 171 | +- **Comment**: `author`, `text`, `createdTime`, `isResolved` |
| 172 | +- **Replies**: A collection of replies. Each reply is an object containing its `author`, `text`, and `createdTime` (no nested replies-of-replies). |
| 173 | + |
| 174 | +In the below sample, comments are added to a specific cell using cell data binding. The "Comments" review pane is shown initially by enabling the `showCommentsPane` property, and comments are added using `updateCell` method in the `created` event. |
| 175 | + |
| 176 | +{% tabs %} |
| 177 | +{% highlight ts tabtitle="app.component.ts" %} |
| 178 | +{% include code-snippet/spreadsheet/angular/comment-cs1/src/app.component.ts %} |
| 179 | +{% endhighlight %} |
| 180 | + |
| 181 | +{% highlight ts tabtitle="main.ts" %} |
| 182 | +{% include code-snippet/spreadsheet/angular/comment-cs1/src/main.ts %} |
| 183 | +{% endhighlight %} |
| 184 | +{% endtabs %} |
| 185 | + |
| 186 | +{% previewsample "/document-processing/samples/spreadsheet/angular/comment-cs1" %} |
| 187 | + |
| 188 | +### Important Notes |
| 189 | +* **One thread per cell**: Attach a single `comment` object per cell. New remarks should be added as replies inside the existing thread. |
| 190 | +* **Author Identity**: The author name for each comment and reply is static once set. When exporting, the author information is preserved for all comments, even if multiple authors exist in the workbook. |
| 191 | +* **New comment**: When the "Comments" review pane is enabled, adding a new comment renders the drafted comment editor directly in the "Comments" review pane. |
| 192 | + |
| 193 | +## Limitations |
| 194 | +* **Un-posted comments are not stored**: If you type in the comment editor and close it without clicking **Post**, the entered text is not saved and will not appear when you reopen the editor. Only posted content is persisted in the comment model. |
| 195 | +* **Comments and Notes cannot coexist**: When a cell contains comment, notes cannot be added. Similarly, if a cell already has a notes, comment cannot be added. |
| 196 | +* **Comments in Print**: Comments are not included in print output. |
| 197 | +* **Non-collaborative**: Real-time multi-user synchronization is not supported. However, when exporting and re-importing the workbook, the author information for each comment and reply is preserved. |
| 198 | + |
| 199 | +## See Also |
| 200 | +* [Notes](./notes) |
| 201 | +* [Hyperlink](./link) |
0 commit comments