Integration problems : Angular: KolTable

[M-A-Bendig]

Hello,

we are currently working on a project utilising Angular.
In said project we are now using KoliBri for accessibility.
We encountered a problem.

Said problem occurred when we tried to use the KoliBri Table element ("KolTableStateful" ) containing nested HTML elements.
This should be possible according to the documentation ("https://public-ui.github.io/docs/components/table").
The nested elements were KoliBri buttons ("kol-button").

We used this variant for the inclusion of the nested HTML elements:

{
    render: (_el: {innerHTML: string}, data: KolTableRenderData, index: string, element) => {
        _el.innerHTML = `<kol-button _label="TEST" _variant="primary"></kol-button>`;
    },
}

In Angular there is a feature called "data binding" ("https://v17.angular.io/guide/binding-syntax").
Said feature is utilised for sharing data between HTML elements and the TypeScript code.

Using the kol-button component with data binding would look like the following:

<kol-button _label="TEST" _variant="primary" [_on]="callback"></kol-button>

This [_on]="callback" is where the data binding is used.

The TypeScript code for this example would be:

callbackOnInput = {
  onClick: (_event: Event, value: string) => {
    console.log(value);
  }
};

Considering this, our example for the table would be:

{
    render: (_el: {innerHTML: string}, data: KolTableRenderData, index: string, element) => {
        _el.innerHTML = `<kol-button _label="TEST" _variant="primary" [_on]="callback"></kol-button>`;
    },
}

...

callback = {
  onClick: (_event: Event, value: string) => {
    console.log(value);
  }
};

What now occurs is that Angular's data binding runs first and only then the content of the KoliBri table is rendered and thus the data binding is not applied to the elements inside the table.

Further the other features that Angular provides like
ViewChild ("https://angular.dev/api/core/ViewChild")
or
ViewChildren ("https://angular.dev/api/core/ViewChildren")
are not suited to solve this problem for similar reasons
as in the delayed rendering.

Working minimal example:
angular-kolibri.zip