(input) attribute in Angular

Question

I can't seem to find out what (input) does in Angular. Here's the code sample:

<input class="form-control" placeholder="person" (input)="filterPersons($event.target.value, 'Hair Colour')">

I have placed a log inside the filterPersons method to see when it is executed but nothing gets outputted at all when I click/unclick the checkbox or submit the form. What functionality does (input) actually provide?

Worth noting that there are no errors and the codebase works fine and in fact there are multiple examples of this throughout the codebase so I know it's not a simple typing error but I cannot see what effect it has.

@slashsharp oh I see, in this use case, it's used for a checkbox, is that incorrect? — mdaabis
– mdaabis, Commented Mar 9, 2021 at 10:06
Doc: "The input event fires when the value of an <input>, <select>, or <textarea> element has been changed." — Barremian
– Barremian, Commented Mar 9, 2021 at 10:07
@mdaabis Please check my code and let me know does it resolve your problem or not. Best wishes. :-) — Srijon Chakraborty
– Srijon Chakraborty, Commented Mar 9, 2021 at 10:09

Loop · Accepted Answer · 2021-03-09 10:28:57Z

2

It seems like what you want is this: https://developer.mozilla.org/de/docs/Web/HTML/Element/Input/checkbox as the input type and then you can listen for changes via the change event instead of input (There is no input on checkbox):

<input type="checkbox" class="form-control" placeholder="person" (change)="filterPersons($event.target.value, 'Hair Colour')">

As on getting triggered on the form submit, you would have to do that programmatically or store the state when the input changes.

answered Mar 9, 2021 at 10:28

Loop

5202 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DaggeJ · Accepted Answer · 2021-03-09 10:08:17Z

1

Try providing type="text" / type="number" and I'm sure you will see your method being executed. The (input) event fires on every key press and can be used if you want immediate validation of an input (The (change) event fires when you leave the control.)

answered Mar 9, 2021 at 10:08

DaggeJ

2,2091 gold badge14 silver badges25 bronze badges

Comments

marc_s · Accepted Answer · 2022-06-07 04:17:32Z

1

I don't know why could not able to find what (input) actually does. In your code

<input class="form-control" placeholder="person" (input)="filterPersons($event.target.value, 'Hair Colour')">

(input) call filterPersons method with 2 parameters.
Please check the stackblitz link and see the console.log value. It changes on every single input.
StackBlitz Demo Link.

edited Jun 7, 2022 at 4:17

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Mar 9, 2021 at 10:07

Srijon Chakraborty

2,1622 gold badges12 silver badges24 bronze badges

Collectives™ on Stack Overflow

(input) attribute in Angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related