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.