Scheduler - Antipattern at "onRemove" and "onAdd" events, throws Binding to event property 'onAdd' is disallowed for security reasons, please use (Add)

[luiscla27]

Feature request

Package versions you currently use:

devexteme version: 20.2.6
devextreme-angular version: 20.2.6

Description: Currently onRemove and onAdd are not events, they are input parameters of Function type, this is consider as a bad practice in Angular as you can easily lose control of this references. The current implementation looks like this:

<dx-scheduler ... >
    <dxi-view ... </dxi-view>
    <dxo-appointment-dragging [group]="draggingGroupName" [onRemove]="onRemove" [onAdd]="onAdd">
    </dxo-appointment-dragging>
</dx-scheduler>

Preferred Solution: The expected implementation for <dxo-appointment-dragging> would look like this:

<dxo-appointment-dragging [group]="draggingGroupName" (onRemove)="onRemove($event)" (onAdd)="onAdd($event)"> 
</dxo-appointment-dragging>

Alternatives: Currently I'm stickin with your Function "events", the following is the demo where I found this issue: https://js.devexpress.com/Demos/WidgetsGallery/Demo/Scheduler/CustomDragAndDrop/Angular/Light/

[hakimio]

That's not only scheduler issue. There are a lot of other DX Angular components which have this problem. A simple workaround is to use arrow function, so you can still access the component class.

[luiscla27]

btw.

The event names should be add and remove instead of onAdd and onRemove, running jasmine tests throws the following error:

Error: Binding to event property 'onAdd' is disallowed for security reasons, please use (Add)=..

As a workaround, I had to set the input values manually from code:

<dxo-appointment-dragging #drag [group]="draggingGroupName"> </dxo-appointment-dragging>

@ViewChild('drag')
drag: DxoAppointmentDraggingComponent;
ngAfterViewInit() {
   this.drag.onAdd = this.onAdd;
   this.drag.onRemove = this.onRemove;
}

At least, an alias should be added for Angular implementations.