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.
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