Feedback Editor

This tutorial shows you how to build an emoji feedback cell in Angular using HotCellEditorAdvancedComponent, with Handsontable CSS tokens for theme-aware styling and keyboard navigation.

Overview

This guide shows how to create a feedback editor cell using emoji buttons with Angular’s HotCellEditorAdvancedComponent. Use it for status indicators or any scenario where users choose from a small set of visual options.

Difficulty: Beginner Time: ~15 minutes Libraries: None

What You’ll Build

A cell that:

Displays emoji feedback buttons when editing
Shows the selected emoji when viewing
Uses Handsontable CSS tokens for theme-aware styling (same look as the Feedback recipe)
Supports keyboard navigation (arrow keys and Tab)
Provides click-to-select functionality
Works with Angular’s component-based architecture
Supports per-column configuration

Prerequisites

1
npm install @handsontable/angular-wrapper

What you need:

Angular 16+ (decorators support)
@handsontable/angular-wrapper package
Basic Angular knowledge (components, decorators, change detection)

Import Dependencies
```
1
import { Component, ChangeDetectorRef } from "@angular/core";
2
import { HotTableModule, HotCellEditorAdvancedComponent, KeyboardShortcutConfig } from "@handsontable/angular-wrapper";
```
What we’re importing:
- HotCellEditorAdvancedComponent - Base class for creating custom editors
- HotTableModule - Angular module providing the <hot-table> component (imported in AppComponent)
- ChangeDetectorRef - For manual change detection
- KeyboardShortcutConfig - Type definitions for keyboard shortcuts
registerAllModules() is called once in app.config.ts, not in component files.
Create the Editor Component

Create an Angular component that extends HotCellEditorAdvancedComponent.
```
1
@Component({
2
  standalone: true,
3
  imports: [],
4
  template: `
5
    <div class="feedback-editor">
6
      @for (option of config; track option) {
7
      <button [class.active]="option === getValue()" (click)="onClick(option)">
8
        {{ option }}
9
      </button>
10
      }
11
    </div>
12
  `,
13
  styleUrls: ['./example1.css'],
14
})
15
export class FeedbackEditorComponent extends HotCellEditorAdvancedComponent<string> {
16
  override config = ["👍", "👎", "🤷"];
17
  override value = "👍";
18

19
  private readonly cdr = inject(ChangeDetectorRef);
20

21
  onClick(option: string): void {
22
    this.setValue(option);
23
    this.finishEdit.emit();
24
  }
25
}
```
What’s happening:
1. Class extends HotCellEditorAdvancedComponent<string> - base class for custom editors
2. @Component decorator with inline template and styleUrls for theme-aware CSS (Handsontable tokens)
3. override config - array of options to display (👍, 👎, 🤷)
4. override value - default value for the editor
5. getValue() / setValue() - inherited methods for value management
6. finishEdit.emit() - emits event to save and close the editor
7. ChangeDetectorRef - injected for manual change detection
8. @for - loops through config options
9. feedback-editor and active CSS classes - styled via external CSS using Handsontable tokens (same as the Feedback recipe)
Key concepts:
- Class-based component: Extends from HotCellEditorAdvancedComponent<T>
- State management: value is a class property, managed by base class
- Angular patterns: Template syntax, property binding, event binding

Add Styling

Use a separate CSS file with Handsontable CSS custom properties (tokens) so the editor matches native editors and adapts to themes and dark mode—same approach as the Feedback recipe.

example1.css:

1
.feedback-editor {
2
  display: flex;
3
  gap: var(--ht-gap, 4px);
4
  width: 100%;
5
  height: 100%;
6
  box-sizing: border-box !important;
7
  padding: var(--ht-cell-vertical-padding, 4px) var(--ht-cell-horizontal-padding, 8px);
8
  background-color: var(--ht-cell-editor-background-color, #ffffff);
9
  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)
10
    var(--ht-cell-editor-border-color, #1a42e8),
11
    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0
12
    var(--ht-cell-editor-shadow-color, transparent);
13
  border: none;
14
  border-radius: 0;
15
}
16

17
.feedback-editor button {
18
  background: var(--ht-background-color, #ffffff);
19
  color: var(--ht-foreground-color, #000000);
20
  border: 1px solid var(--ht-border-color, #e0e0e0);
21
  border-radius: var(--ht-border-radius, 4px);
22
  padding: 0;
23
  margin: 0;
24
  height: 100%;
25
  width: 33%;
26
  font-size: var(--ht-font-size, 14px);
27
  text-align: center;
28
  cursor: pointer;
29
}
30

31
.feedback-editor button:hover {
32
  background: var(--ht-border-color, #e0e0e0);
33
}
34

35
.feedback-editor button.active,
36
.feedback-editor button.active:hover {
37
  background: var(--ht-accent-color, #1a42e8);
38
  color: #ffffff;
39
  border-color: var(--ht-accent-color, #1a42e8);
40
}

Reference it in the component with styleUrls: ['./example1.css'] and use classes feedback-editor and active in the template.

Key tokens: --ht-cell-editor-border-color, --ht-cell-editor-background-color, --ht-accent-color, --ht-background-color, --ht-foreground-color, --ht-border-color, --ht-font-size, --ht-gap.

Read Config from Cell Properties

The Angular wrapper automatically handles per-column configuration through the base class.

1
import { Component } from "@angular/core";
2
import { GridSettings, HotTableModule } from "@handsontable/angular-wrapper";
3

4
@Component({
5
  selector: "app-root",
6
  standalone: true,
7
  imports: [HotTableModule],
8
  template: ` <hot-table [data]="data" [settings]="gridSettings"></hot-table> `,
9
})
10
export class AppComponent {
11
  readonly data = [
12
    { feature: "Dark Mode", category: "UI", priority: "High", feedback: "👍", votes: 124, status: "Planned" },
13
    { feature: "Bulk Edit", category: "Core", priority: "High", feedback: "👍", votes: 98, status: "In Progress" },
14
    { feature: "AI Suggestions", category: "Beta", priority: "Medium", feedback: "🤷", votes: 45, status: "Research" },
15
    { feature: "Offline Mode", category: "Infra", priority: "Low", feedback: "👎", votes: 12, status: "Backlog" },
16
  ];
17

18
  readonly gridSettings: GridSettings = {
19
    ...,
20
    columns: [
21
      { data: "feature", type: "text", width: 200 },
22
      { data: "category", type: "text", width: 90 },
23
      { data: "priority", type: "text", width: 100 },
24
      {
25
        data: "feedback",
26
        width: 100,
27
        editor: FeedbackEditorComponent,
28
        config: ["👍", "👎", "🤷"],
29
      },
30
      { data: "votes", type: "numeric", width: 60 },
31
      { data: "status", type: "text", width: 120 },
32
    ],
33
  };
34
}

1
@Component({
2
  standalone: true,
3
  imports: [],
4
  template: `...`,
5
})
6
export class FeedbackEditorComponent extends HotCellEditorAdvancedComponent<string> {
7
  // Config will be automatically populated from cellProperties.config
8
  override config?: string[];
9
  override value = "👍";
10

11
  private readonly cdr = inject(ChangeDetectorRef);
12

13
  onClick(option: string): void {
14
    this.setValue(option);
15
    this.finishEdit.emit();
16
  }
17
}

What’s happening:

override config - allows the base class to set config from column definition
The Angular wrapper automatically reads config from cellProperties
No manual onPrepare implementation needed for basic config reading
Each column can pass different config values

Why this matters:

Different columns can have different options
One editor component, multiple configurations
Automatic configuration injection by the wrapper

Add Keyboard Shortcuts

Add keyboard navigation using the shortcuts property.

1
@Component({
2
  standalone: true,
3
  imports: [],
4
  template: `...`,
5
})
6
export class FeedbackEditorComponent extends HotCellEditorAdvancedComponent<string> {
7
  override config = ["👍", "👎", "🤷"];
8
  override value = "👍";
9

10
  override shortcuts: KeyboardShortcutConfig[] = [
11
    {
12
      keys: [["ArrowRight"], ["Tab"]],
13
      callback: (editor, _event) => {
14
        let index = this.config.indexOf(this.getValue());
15
        index = index === this.config.length - 1 ? 0 : index + 1;
16
        this.setValue(this.config[index]);
17
        this.cdr.detectChanges(); // Manual change detection
18
        return false; // Prevent default Tab behavior
19
      },
20
    },
21
    {
22
      keys: [["ArrowLeft"]],
23
      callback: (editor, _event) => {
24
        let index = this.config.indexOf(this.getValue());
25
        index = index === 0 ? this.config.length - 1 : index - 1;
26
        this.setValue(this.config[index]);
27
        this.cdr.detectChanges();
28
      },
29
    },
30
  ];
31

32
  private readonly cdr = inject(ChangeDetectorRef);
33

34
  onClick(option: string): void {
35
    this.setValue(option);
36
    this.finishEdit.emit();
37
  }
38
}

What’s happening:

ArrowRight/Tab: Move to next option (wraps to first if at end)
ArrowLeft: Move to previous option (wraps to last if at start)
callback: (editor, _event) => {} - receives editor instance and event
this.getValue() and this.setValue() - access current value and update it
this.cdr.detectChanges() - triggers UI update after value change
Return false to prevent default behavior (e.g., Tab moving to next cell)

Keyboard navigation benefits:

Fast selection without mouse
Accessible for keyboard-only users
Intuitive left/right navigation
Tab cycles through options instead of moving cells

Complete Editor Component

Put it all together:

1
@Component({
2
  standalone: true,
3
  imports: [],
4
  template: `
5
    <div class="feedback-editor">
6
      @for (option of config; track option) {
7
      <button [class.active]="option === getValue()" (click)="onClick(option)">
8
        {{ option }}
9
      </button>
10
      }
11
    </div>
12
  `,
13
  styleUrls: ['./example1.css'],
14
})
15
export class FeedbackEditorComponent extends HotCellEditorAdvancedComponent<string> {
16
  override config = ["👍", "👎", "🤷"];
17
  override value = "👍";
18

19
  override shortcuts: KeyboardShortcutConfig[] = [
20
    {
21
      keys: [["ArrowRight"], ["Tab"]],
22
      callback: (editor, _event) => {
23
        let index = this.config.indexOf(this.getValue());
24
        index = index === this.config.length - 1 ? 0 : index + 1;
25
        this.setValue(this.config[index]);
26
        this.cdr.detectChanges();
27
        return false;
28
      },
29
    },
30
    {
31
      keys: [["ArrowLeft"]],
32
      callback: (editor, _event) => {
33
        let index = this.config.indexOf(this.getValue());
34
        index = index === 0 ? this.config.length - 1 : index - 1;
35
        this.setValue(this.config[index]);
36
        this.cdr.detectChanges();
37
      },
38
    },
39
  ];
40

41
  private readonly cdr = inject(ChangeDetectorRef);
42

43
  onClick(option: string): void {
44
    this.setValue(option);
45
    this.finishEdit.emit();
46
  }
47
}

What’s happening:

Class properties: config, value, and shortcuts defined as class properties
Template: Uses feedback-editor and active classes; styling from CSS file with Handsontable tokens
Keyboard shortcuts: Defined directly as class property
Change detection: Manual trigger with ChangeDetectorRef
Styling: External CSS with theme-aware tokens (same look as the Feedback recipe)

Use in Handsontable

Use the editor component in your Angular component (same table structure as the Feedback recipe):

1
import { Component } from "@angular/core";
2
import { GridSettings, HotTableModule } from "@handsontable/angular-wrapper";
3

4
@Component({
5
  selector: "app-root",
6
  standalone: true,
7
  imports: [HotTableModule],
8
  template: ` <hot-table [data]="data" [settings]="gridSettings"></hot-table> `,
9
})
10
export class AppComponent {
11
  readonly data = [
12
    { feature: "Dark Mode", category: "UI", priority: "High", feedback: "👍", votes: 124, status: "Planned" },
13
    { feature: "Bulk Edit", category: "Core", priority: "High", feedback: "👍", votes: 98, status: "In Progress" },
14
    { feature: "AI Suggestions", category: "Beta", priority: "Medium", feedback: "🤷", votes: 45, status: "Research" },
15
    { feature: "Offline Mode", category: "Infra", priority: "Low", feedback: "👎", votes: 12, status: "Backlog" },
16
  ];
17

18
  readonly gridSettings: GridSettings = {
19
    autoRowSize: true,
20
    rowHeaders: true,
21
    autoWrapRow: true,
22
    height: "auto",
23
    width: "100%",
24
    headerClassName: "htLeft",
25
    colHeaders: ["Feature", "Category", "Priority", "Feedback", "Votes", "Status"],
26
    columns: [
27
      { data: "feature", type: "text", width: 200 },
28
      { data: "category", type: "text", width: 90 },
29
      { data: "priority", type: "text", width: 100 },
30
      {
31
        data: "feedback",
32
        width: 100,
33
        editor: FeedbackEditorComponent,
34
        config: ["👍", "👎", "🤷"],
35
      },
36
      { data: "votes", type: "numeric", width: 60 },
37
      { data: "status", type: "text", width: 120 },
38
    ],
39
  };
40
}

HTML (.html):

1
<hot-table [data]="data" [settings]="gridSettings"></hot-table>

What’s happening:

editor: FeedbackEditorComponent - Assigns the editor class to the column
config: ['👍', '👎', '🤷'] - Column-specific options
Same editor component can be reused with different config per column
Configuration through GridSettings interface

Key features:

Reusable editor component with theme-aware styling
Per-column configuration
Type-safe with TypeScript
Declarative settings object

Enhancements

More Feedback Options

Add more emoji options (same as the Feedback recipe):

1
readonly gridSettings: GridSettings = {
2
  columns: [
3
    {
4
      data: 'feedback',
5
      editor: FeedbackEditorComponent,
6
      config: ['👍', '👎', '🤷', '❤️', '🔥', '⭐'],
7
    },
8
  ],
9
};

The editor automatically adjusts button widths based on config length.

Custom Button Styling

You can add extra styles (e.g. transitions, hover effects) in your CSS file while keeping Handsontable tokens for theme consistency. For example, in example1.css:
```
1
.feedback-editor button {
2
  transition: transform 0.2s, box-shadow 0.2s;
3
}
4

5
.feedback-editor button:hover {
6
  transform: scale(1.05);
7
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
8
}
```
Keep using the existing .feedback-editor and .active rules with var(--ht-*) tokens so the editor stays theme-aware.

Dynamic Config from Cell Properties

To read custom config from column definition, implement the beforeOpen lifecycle hook:

1
@Component({
2
  standalone: true,
3
  imports: [],
4
  template: `...`,
5
})
6
export class FeedbackEditorComponent extends HotCellEditorAdvancedComponent<string> {
7
  override config?: string[];
8
  override value = "👍";
9

10
  override beforeOpen(editor: ExtendedEditor<any>, { cellProperties }: any): void {
11
    this.config = cellProperties.config as string[];
12
  }
13

14
  // ... rest of the component
15
}

Then pass different configs per column:

1
columns: [
2
  {
3
    data: "feedback",
4
    editor: FeedbackEditorComponent,
5
    config: ["👍", "👎", "❤️", "🔥"],
6
  },
7
];

What’s happening:

beforeOpen is called before the editor opens
Read config from cellProperties.config
Each column can have different options
One editor component, multiple configurations

Add tooltips to buttons using the title attribute:

1
const tooltips: Record<string, string> = {
2
  "👍": "Positive",
3
  "👎": "Negative",
4
  "🤷": "Neutral",
5
};

In the template:

1
<div class="feedback-editor">
2
  @for (option of config; track option) {
3
  <button
4
    [class.active]="option === getValue()"
5
    [attr.title]="tooltips[option] ?? ''"
6
    (click)="onClick(option)"
7
  >
8
    {{ option }}
9
  </button>
10
  }
11
</div>

Expose tooltips as a class property or use a getter.

Text Labels Instead of Emojis

Use text buttons for clarity:

1
columns: [
2
  {
3
    data: "feedback",
4
    editor: FeedbackEditorComponent,
5
    config: ["Positive", "Negative", "Neutral"],
6
  },
7
];

The editor works with any string values, not just emojis.

Using External CSS File

The main example already uses an external CSS file (example1.css) with Handsontable tokens—see Step 3 and the Feedback recipe CSS. Use styleUrls: ['./example1.css'] (or your own path) in the component. For a different file name or folder, point styleUrls to that file and keep the same .feedback-editor and .active rules with var(--ht-*) tokens for theme-aware styling.

Accessibility

HTML buttons are inherently accessible, but you can enhance them with ARIA attributes:

1
@Component({
2
  standalone: true,
3
  imports: [],
4
  template: `
5
    <div class="feedback-editor">
6
      @for (option of config; track $index) {
7
      <button
8
        [attr.aria-label]="option + ' feedback option'"
9
        [attr.aria-pressed]="option === getValue()"
10
        [tabIndex]="option === getValue() ? 0 : -1"
11
        [class.active]="option === getValue()"
12
        (click)="onClick(option)"
13
      >
14
        {{ option }}
15
      </button>
16
      }
17
    </div>
18
  `,
19
  styleUrls: ['./example1.css'],
20
})
21
export class FeedbackEditorComponent extends HotCellEditorAdvancedComponent<string> {
22
  // ... component code
23
}

Keyboard navigation:

Tab: Navigate to editor (focuses active button)
Arrow Left/Right: Cycle through options (via shortcuts)
Enter: Select current option and finish editing
Escape: Cancel editing
Click: Direct selection

ARIA attributes:

[attr.aria-label]: Describes each button
[attr.aria-pressed]: Indicates selected state
[tabIndex]: Controls keyboard focus order

Congratulations! You’ve created a theme-aware feedback editor with emoji buttons using Angular’s HotCellEditorAdvancedComponent, matching the look of the Feedback recipe and perfect for quick feedback selection in your data grid!

What you learned

You built an emoji feedback cell editor in Angular using HotCellEditorAdvancedComponent. You used Handsontable CSS tokens for theme-aware button styling, override shortcuts for keyboard navigation, and ChangeDetectorRef to trigger view updates after keyboard-driven value changes.

Next steps

Feedback (JavaScript) - The same concept using editorFactory with Handsontable CSS tokens.
Feedback (React) - The React version using EditorComponent.
Star Rating Editor (Angular) - Another Angular editor using HotCellEditorAdvancedComponent with SVG stars.

Feedback Editor

Overview

What You’ll Build

Prerequisites

Import Dependencies

Create the Editor Component

Add Styling

Read Config from Cell Properties

Add Keyboard Shortcuts

Complete Editor Component

Use in Handsontable

Enhancements

More Feedback Options

Custom Button Styling

Dynamic Config from Cell Properties

Tooltip on Hover

Text Labels Instead of Emojis

Using External CSS File

Accessibility

What you learned

Next steps