We are utilizing custom angular components when rendering our events.
- https://www.bryntum.com/docs/scheduler-pro/guide/SchedulerPro/integration/angular/guide#using-angular-components-as-renderers
- https://www.bryntum.com/docs/scheduler-pro/api/Scheduler/view/mixin/SchedulerEventRendering#config-eventRenderer
This works, however any update to the html causes the renderer to throw away the existing element, and create a new one, which triggers the full DOM lifecycle of an element (e.g. Destroy old, Create New).
Ideally, we would like for the elements to be reused, and process a Changes event when the data has changed.
This can be accomplished in part via using DomSync. We are looking to modify our eventRenderer function to instead return a DomConfig node, which according to examples is possible.
Our code looks something like this as a return result, with data based on the event and resource.
{
tag: 'example-custom-component',
dataset: {
cost: 'Foo',
reason: 'Bar'
}
Our angular component works, and detects the changes / sync. however there are a few issues that are encountered:
On creation, the element is created, and then attributes are added. This causes the component to begin initializing without any data. The data will come in with Changes as the data attributes are applied, however would there be a way to optimize the sync creation such that attributes are applied on create?
After the element is created, the sync is completes, which removes all of the elements that our angular component created. It seems that we can work around this issue by adding keepChildren: true in our DomConfig, however this is undocumented, and feels like it may be a work around. Looking into the sync process further, there is a config option when syncing for 'Strict' syncing. This feels more appropriate for our custom renderer. Is there any way to opt into strict syncing specifically for results from a custom renderer?
