How to render Angular components in Handsontable cells

What is Angular?

Angular is a framework for building single-page clients using HTML and TypeScript. Angular is written in TypeScript.

Features of Angular

The following are some of the key features of Angular:

Cross-platform
Efficient two-way data binding
Less code framework
Fast and optimal performance
Framework with less code
Dependency injection

About `Handsontable`

Handsontable is a JavaScript component that combines data grid spreadsheet features.

It binds to any data source using the JSON format and handles large amounts of records. It supports operations like filtering, sorting and CRUD (Create, Read, Update, Delete), creating custom cell types, and adding data summaries.

Cell function

Each cell in the Handsontable has three related functions:

renderer
editor
validator

Each of these functions is responsible for the behavior of different cells. You can define them individually, or you can use one cell type to define all three at once.

Let’s take a closer look at renderer.

renderer

Handsontable does not directly display the values stored in the data source. Instead, whenever a datasource value needs to be displayed in a table cell, it is passed to the cell renderer function with a table cell object (DOM node) of type HTMLTableCellElement.

The renderer is expected to format the passed value and place it as the content of the cell object.

Handsontable contains five predefined renderers that you can extend when you create your own renderer:

TextRenderer
PasswordRenderer
AutocompleteRenderer
NumericRenderer
CheckboxRenderer

Performance of the `renderer` function

Since a table can be rendered multiple times during its lifetime, renderer functions should be kept as simple and fast as possible. Failure to do so can result in poor performance when working with large data.

`Handsontable` cell types

Cell type is represented by a string such as:

text
numeric
autocomplete
handsontable
date
checkbox
password
select
dropdown

For example, the cell type numeric can be seen in this simple code below.

var hot = new Handsontable(document.getElementById('container'), {
  columns: [
    {
      type: 'numeric'
    }
  ]
});

Instead of:

var hot = new Handsontable(document.getElementById('container'), {
  columns: [
    {
      renderer: Handsontable.renderers.NumericRenderer,
      editor: Handsontable.editors.TextEditor,
      validator: Handsontable.validators.NumericValidator
    }
  ]
});

Angular provides a mechanism for dynamically rendering components through the view container using ComponentFactory. To do this, you need to know the component type at compile time.

Below, we try to display Angular Components in Handsontable cells. This table should display an autocomplete drop-down search, and we should be able to multi-select different cells with ctrl+click.

this.hot = new Handsontable(this.handsontable.nativeElement, {
  data: this.tableData,
  colWidths: [70, 250],
  colHeaders: ['Id', 'Custom Component'],
  columns: [
    {
      data: 'id',
    },
    {
      data: 'id',
      renderer: (instance: any ,value: any, str: any, row: any, cellProperties: any) => {
        if (cellProperties.hasOwnProperty('ref')) {
          (cellProperties.ref as ComponentRef<CellContainerComponent>).instance.value = row;
        } else {
          cellProperties.ref = this.loadComponentAtDom(
            CellContainerComponent,
            str,
            ((component: any) => {
              component.template = this.button4Angle;
              component.value = row;
            }));
        }
        return str;
      },
      readOnly: true,
    },
  ]
});