In a project of mine, I try to display Angular Components (like an Autocomplete Dropdown Search) in a table. Because of the requirements I have (like multi-selecting different cells with &lt;kbd&gt;ctrl&lt;/kbd&gt;+click) I decided to give it a go with handsontable.

I&#39;ve used the [handsontable renderer][1] and [add the components dynamically][2].

The code looks like this

matrix.component.ts
```typescript
this.hot = new Handsontable(this.handsontable.nativeElement, {
  data: this.tableData,
  colWidths: [80, 300],
  colHeaders: [&#39;Id&#39;, &#39;Custom Component&#39;],
  columns: [
    {
      data: &#39;id&#39;,
    },
    {
      data: &#39;id&#39;,
      renderer: (instance: any, td: any, row: any, col: any, prop: any, value: any, cellProperties: any) =&gt; {
        if (cellProperties.hasOwnProperty(&#39;ref&#39;)) {
          (cellProperties.ref as ComponentRef&lt;CellContainerComponent&gt;).instance.value = row;
        } else {
          cellProperties.ref = this.loadComponentAtDom(
            CellContainerComponent,
            td,
            ((component: any) =&gt; {
              component.template = this.button4Matrix;
              component.value = row;
            }));
        }
        return td;
      },
      readOnly: true,
    },
  ],
});


private loadComponentAtDom&lt;T&gt;(component: Type&lt;T&gt;, dom: Element, onInit?: (component: T) =&gt; void): ComponentRef&lt;T&gt; {
  let componentRef;
  try {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
    componentRef = componentFactory.create(this.injector, [], dom);
    onInit ? onInit(componentRef.instance) : console.log(&#39;no init&#39;);
    this.appRef.attachView(componentRef.hostView);
  } catch (e) {
    console.error(&#39;Unable to load component&#39;, component, &#39;at&#39;, dom);
    throw e;
  }
  return componentRef;
}
```
What&#39;s my current issue is the lifecycle of the rendered angular components.


Stuff I tried:

1. **Do nothing**

*Tried Solution*: Doing nothing and leaving everything to Angular

*Problem*: Angular never calling the ngOnDestroy of the CellContainer.



 
2. **Saving componentRefs**

*Tried Solution*: Saving the componentRef in an Array and after a certain amount of rendering trying to destroy the components I
    rendered some time ago. Counting via time, handsontable hooks
    (verticalScroll/beforeRender/afterRender), in the render-method

*Problem*: Destroy of the angular component always throws an error (&#39;cannot read property&#39;nativeNode&#39; of null&#39;) or the components get
    displayed completely wrong
    


3. **Check during rendering if an element is there**

*Tried Solution*: During the render: I checked if there&#39;s already a component and if it was I used to recycle the already-there component by adding a new value only.

*Problem*: The values get completely mixed up during scrolling.

A link to my solution (and an implemented solution #3) is available on [github][3].

Does anyone have an idea of how to handle this in a clean way? If not the application gets slow &amp; unusable after a little bit of scrolling &amp; using the table.
Better refer : [https://handsontable.com/docs/8.2.0/tutorial-cell-function.html][4]


  [1]: https://docs.handsontable.com/pro/1.18.0/demo-custom-renderers.html
  [2]: https://medium.com/front-end-hacking/dynamically-add-components-to-the-dom-with-angular-71b0cb535286
  [3]: https://github.com/phhbr/handsontable-filled-with-ng-components
  [4]: https://handsontable.com/docs/8.2.0/tutorial-cell-function.html

All Handsontable Solutions on Gang of Coders

Total of 1 Handsontable Solutions

Rendering Angular components in Handsontable Cells