admin管理员组

文章数量:1418039

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

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

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

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

  • javascript
  • angular
  • typescript
  • input
  • increment
Share Improve this question asked Oct 4, 2021 at 16:16 LucaLuca 3481 gold badge5 silver badges26 bronze badges 4
  • <span (click)="myInput.something = myInput.something + 1">+</span> incrementing from the template is a suitable option for you? – 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 Commented Oct 5, 2021 at 7:19
  • Did you try to work with NgModel? NgModel will support the two-way binding. – 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 Commented Oct 5, 2021 at 8:46
Add a ment  | 

1 Answer 1

Reset to default 1

If you want to change the value in the parent ponents 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./edit/angular-en58l5?file=src%2Fapp%2Fhello.ponent.ts

本文标签： javascriptAngular change input value on clickStack Overflow

版权声明：本文标题：javascript - Angular change input value on click - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745282500a2651504.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。