topic Re: Angular listen to calcite events in Calcite Design System Questions

Angular listen to calcite events

Robert_van_Gilst — Thu, 23 Feb 2023 13:27:03 GMT

Hi,

I want to react to calciteInputTextInput event in my Angular application. Tried doing it like this.

<calcite-input placeholder="Filter brugere" icon="filter" (calciteInputTextInput)="TextInput($event)"></calcite-input>

But my application does not react to it. I have to use the default html element events to react.

<calcite-input placeholder="Filter users" icon="filter" (keyup)="TextInput($event)"></calcite-input>

Am I doing something worng?

Re: Angular listen to calcite events

KittyHurley — Thu, 23 Feb 2023 17:46:33 GMT

Hi @Robert_van_Gilst, It looks like you are using the calciteInputTextInput event, but the Input component uses the calciteInputInput event.

The calciteInputTextInput event is reserved for the Input Text component, so could have created some conflicts if working with both components together.

Re: Angular listen to calcite events

Robert_van_Gilst — Thu, 23 Feb 2023 19:04:58 GMT

Hi @KittyHurley

Thank you for the fast reply. Now I can see where I went wrong. The documentation for the calciteInputText shows the calciteInput element instead of the calciteInputText element. And I copied from the element from the example.

After changing to the calciteInputText element the event fires as expected.

<calcite-input-text placeholder="Filter users" icon="filter" (calciteInputTextInput)="TextInput($event)" clearable="true"></calcite-input-text>

Re: Angular listen to calcite events

KittyHurley — Thu, 23 Feb 2023 22:43:14 GMT

Thanks much for recognizing and relaying on, @Robert_van_Gilst!

We've got a fix in to showcase the Calcite Input Text component properly in the sample, which should mitigate the documentation discrepancy in next Wednesday's documentation release.