DevExpress/devextreme-angular

Support dxi-* and dxo-* event with parenthesis

mickjol opened this issue · 4 comments

mickjol commented

Feature request

Support dxi-* dxo-* event with parenthesis.

Package versions you currently use:
angular/core: 9.0.6
devexteme version: 19.2.7
devextreme-angular version: 19.2.7

Description:
To be able to use the "onInitialized" on a "dxo-form" or "onClick" on "dxi-button"
We could use the brackets, but when run "ng test" we have error like <dxo-form [onInitialized]="myEvent"><dxo-form>
Error : Binding to event property 'onClick' is disallowed for security reasons

Preferred Solution:
I Like to be able to use the parenthesis like the standard event.
<dxo-form (onInitialized)="myEvent($event)"><dxo-form>

Alternatives:
Yes I have a alternative, but it's a pain each time

LexDX commented

Hi @mickjol,

As far as I know, such issues should not occur in the latest versions of our controls. Would you please provide me with a sample project that demonstrates the issue, so I can reproduce the issue on my side? This way, I will be able to check the issue on my side. I look forward to your reply.

LexDX commented

I'm going to close this issue for now. Feel free to reactivate it once you can provide us with a sample project.

mickjol commented

Hi,
We just update to devextreme-angular to 20.1.3 and we have the same problem.
I attach a mini project angular/cli to demonstrate this.

test-devextreme.zip

Because the event "onClick" is bind to a property with [onClick] rather than bind to handler with (onClick)

  • When we run "ng serve", the first button on demo work.
  • When your run "ng test", the component fail the test.

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

hakimio commented

@mickjol None of those are really DevExtreme issues.

  1. They specify in the documentation that you can not use () syntax for event binding in nested components.
  2. You need to learn how Angular testing works. To solve the issue you are facing with tests you have to import DxDataGridModule module:
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [DxDataGridModule]
    }).compileComponents();

I would also recommend using shallow-render for testing Angular apps.

  • 👍2