Angular change input value on click

Question

I have an input that has a value received as input from another component:

    <input [value]="myInput.something">
    <span (click)="incrementPlus()">+</span>

I would need a simple function that increases the value of the input at each click by a number of my choice. It's a very simple thing except that the input value is passed to me in:
@Input() myInput: number;
and I don't have to create a variable where I save the value, as I have to repeat / reuse it on many other inputs. I repeat: it is normally simple as I could pass the @ input into the function, modify it, save it in a variable and then pass the variable to the html input value. But I have to reuse it on other html inputs, and writing lots of variables doesn't seem like a good practice to me.

It's not like all the other questions I've seen before, as they all change a value statically, or wrap it in a variable, and I don't want to do this.

<span (click)="myInput.something = myInput.something + 1">+</span> incrementing from the template is a suitable option for you? — Alexis Deprez
– Alexis Deprez, Commented Oct 4, 2021 at 18:25
I tried but it doesn't work.... the html input value remains the same anyway — Luca
– Luca, Commented Oct 5, 2021 at 7:19
Did you try to work with NgModel? NgModel will support the two-way binding. — Shay Zalman
– Shay Zalman, Commented Oct 5, 2021 at 7:29
unfortunately I cannot change it ... the value was entered by other colleagues for other reasons, if I change it other things break — Luca
– Luca, Commented Oct 5, 2021 at 8:46

Alexis Deprez · Accepted Answer · 2021-10-05 10:10:25Z

1

If you want to change the value in the parent components too, you will need to work with @Output and two-way-binding. When you input change, you will call the emit of the output EventEmitter to notify the parent the value has changed.

For two-way-binding, the output must be named like your input, plus Change.

In the child, you put :

@Input() something: number;
@Output() somethingChange = new EventEmitter<number>();

And in the parent :

[(something)]="theValue"

Then when you somethingChange.emit some value, it changes the parent's one, and it passes it to your child too.

Here is a full example : https://stackblitz.com/edit/angular-en58l5?file=src%2Fapp%2Fhello.component.ts

edited Oct 5, 2021 at 10:10

answered Oct 5, 2021 at 9:59

Alexis Deprez

5754 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Angular change input value on click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related