Custom Elements built with Kendo Ui for Angular components

[svetq]

I'm submitting a...

• Suggestion for improvement

We need to research the topic on Custom Elements and how to integrate Kendo Ui for Angular components in a Custom Element.

Current behavior

We can create a custom element, that holds a grid with all of its built in functionality. However, when we try to use the generated custom element outside an Angular application, the grid is not re-rendered on dataStateChange or any other event. The grid is initially loaded and displayed correctly, but after a sortChange event is triggered, the grid's data will be sorted, but the grid will not be re-rendered to display the correct data.

The same behavior occurs if we use non-Kendo components in our custom element.

Environment

Package versions:

"@angular/elements": version: 6.1.7

for internal use - this issue is related to ticket 1340667

[HashanMWanniarachchi]

This seems to be an issue with change detection not working as intended inside angular elements. I got a kendo grid working by using NgZone.run() method. As RobWormald from the angular core team is saying here, This happens when the model changes are happening outside of NgZone. As he says it, we should handle the change detection ourselves.

[tsvetomir]

Change detection should definitely be handled in the wrapper component, as it knows when the sort order has been applied.

You should be able to use ChangeDetectorRef.detectChanges() with the same effect as Zone.run - the goal is to trigger the change detection from the custom element down and we don't need the Zone for that.

[remackgeek]

I haven't had a chance to test it yet, but a fix for this landed today in zone.js:
PR 1133

[HashanMWanniarachchi]

I haven't had a chance to test it yet, but a fix for this landed today in zone.js:
PR 1133

@remackgeek I saw this solution was referred in angular github, and just noticed that it was merged into angular:master branch. :)

[rgullhaug]

Change detection should definitely be handled in the wrapper component, as it knows when the sort order has been applied.

You should be able to use ChangeDetectorRef.detectChanges() with the same effect as Zone.run - the goal is to trigger the change detection from the custom element down and we don't need the Zone for that.

@tsvetomir What do you mean by handling the change detection in the wrapper component. Will we need to attach to all kendo grid events in the component hosting the kendo grid, and run ChangeDetectorRef.detectChanges() there?

[tsvetomir]

@rgullhaug this is now a moot point following the fix linked above, as attributeChangedCallback will run in the zone.