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.

Answer 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