Hi, I want to react to calciteInputTextInput event in my Angular application. Tried doing it like this. But my application does not react to it. I have to use the default html element events to react. Am I doing something worng?

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Angular listen to calcite events

Robert_van_Gilst

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?

Najděte více příspěvků označených jako

Components

Accepted answers

KittyHurley

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.

All comments

KittyHurley

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.

Robert_van_Gilst

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>

KittyHurley

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.

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.