Angular set input on change equal to a variable holding a function

Question

I know you can do something like

<input (input)="doSomething($event)" />
<input (input)="boolVar = $event.target.value > 5" />

but how can I do something like

funcVar = (e) => {
  console.log(e.target.value)
}

<input (input)="funcVar" />

I tried other things like

<input [input]="funcVar" />
<input [(input)]="funcVar" />

but no luck. Reason I'm doing this is that our forms are being generated from a data set, so they only way I can add on stuff like is by passing in stuff through variables that will generate the forms.

Martin Parenteau · Accepted Answer · 2018-07-25 21:10:37Z

2

The event handler should call the function. The markup would be:

<input (input)="funcVar($event)" />

for the funcVar member defined as:

public funcVar = (e) => {
  console.log(e.target.value)
}

If another method is assigned to funcVar later, that new method will be executed when the input event is triggered:

someMethodExecutedLater() {
  this.funcVar = (e) => {
    // From now on, this new function will be called by the event handler
    ...
  }
}

edited Jul 25, 2018 at 21:10

answered Jul 25, 2018 at 20:36

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

4 Comments

canpan14 Over a year ago

So is there no way to pass in funcVar($event) through a variable? Since I can't hard code that onto the input. I need to do something like <input (input)="funcVar"> where funcVar is holding the function. Or a way to hard code it like that, but override what function funcVar is on the fly. Need it to try and evaluate what I put on the right hand side (as it will be a variable holding a function) and then call it.

canpan14 Over a year ago

Because funcVar is a variable that will change what function it's holding based on the form that's being generated

canpan14 Over a year ago

Oh wait, I think I see what you are saying (one minute)

canpan14 Over a year ago

Makes perfect sense. I was overthinking things. Thinking it wouldn't look up funcVar (it's late in the day) :D Thanks for the explanation!

Collectives™ on Stack Overflow

Angular set input on change equal to a variable holding a function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related