Angular Button Click Not Triggering Function in Component

Issue

I'm working on an Angular project and facing an issue where a button click in my template is not triggering the associated function in the component. The button is part of a DevExtreme DataGrid and is supposed to call the createReport function, logging the event to the console and navigating to a different route. However, the function doesn't seem to get called at all, as there's no log in the console when the button is clicked.

Here's the relevant HTML template snippet

<!-- Snippet from your reporting-todo.component.html -->

<dxi-column caption="Utwórz" type="buttons">
<dxi-button hint="Utwórz nowy raport"
            icon="search"
            (onClick)="createReport($event)">
</dxi-button>
</dxi-column>

And the corresponding TypeScript component method:

// Snippet from your reporting-todo.component.ts
createReport(event: any) {
  try {
    console.log('Button clicked', event);
    // Rest of your code
  } catch (error) {
    console.error('Wystąpił błąd w createReport:', error);
  }
}

However, when the button is clicked, the expected console log from createReport is not appearing. Other functions in the component (like ngOnInit) are working correctly and logging to the console.

I'm using Angular and DevExtreme. Has anyone encountered a similar issue or can suggest what might be going wrong?

Solution

I think for the event part, it should be (click), except your component define another type of event

Answered By - Raphaël VO