Dynamic function calling Angular 2

Question

I have function name in a variable and I am assigning that variable on click event of button. but it is not working. Any Help?

@Component({
  selector: 'my-app',
  template: `
    <div>
    <h2>Function name is: {{FunctionName}}</h2>
    <input type="button" value="click here" (click) = [FunctionName]()>
    </div>
    <p>{{value}}</p>
  `,
})
export class App {
  FunctionName:string;
  value: string;
  constructor() {
    this.FunctionName = 'clickFunction'
  }

  clickFunction(){
    this.value = "button clicked";
  }
}

Here is the code

Plunker Code

score 19 · Accepted Answer · answered Feb 08 '17 at 06:51

19

Syntax needs to be like this:

<input type="button" value="click here" (click) ="this[FunctionName]()">

Fixed plunker: https://plnkr.co/edit/xGgFQuHNH72Q9FdOPEdK?p=preview

answered Feb 08 '17 at 06:51

eko

39,722
10
72
98

Is it possible if I do the same with child-parent related component. Like I write (click) = "this....." on child components selector. and define the function on parent component's ts file. will it work? – amansoni211 Feb 08 '17 at 08:06
@amansoni211 but the child components template scope will be out of the parents scope. I don't think that will work. – eko Feb 08 '17 at 08:07
Will this work if I define this function in parent component? call it in childs template like we are doing above. – amansoni211 Feb 09 '17 at 05:47
@amansoni211 isn't it the same thing with your previous comment? Create a new question about it maybe with a clear usage? – eko Feb 09 '17 at 05:49
What if the event name is also dynamic and coming from json variable. how I can make this dynamic clickFunction(){ this.value = "button clicked"; } my function name is coming from json file – Ubiquitous Developers Jul 03 '19 at 10:54
@UbiquitousDevelopers then bind that json variable to `this.value`? Are you getting the json file via an http when an async operation happens? Can you give more context? – eko Jul 04 '19 at 07:06
@eko - Yes, I am getting from http function, but again it is fine if you take as static variable. but the problem is FUNCTION name should be dynamic as per json property, so even If i change json property value, it works – Ubiquitous Developers Jul 04 '19 at 07:11
@eko- you can refer this link, I created separate stack for it https://stackoverflow.com/questions/56868659/how-to-create-function-name-from-json-in-angular-7/56868700?noredirect=1#comment100288196_56868700 – Ubiquitous Developers Jul 04 '19 at 07:12

score 2 · Answer 2 · answered Feb 08 '17 at 06:54

try this

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Function name is: {{FunctionName}}</h2>
      <input type="button" value="click here" (click)="FunctionName()">
    </div>
    <p>{{value}}</p>
  `,
})
export class App {
  FunctionName: Fn;
  value: string;
  constructor() {
    this.FunctionName = this.clickFunction; //assign function to variable.
  }

  clickFunction(){
    this.value = "button clicked";
  }
}

Online demo: https://plnkr.co/edit/6uVZd0L0KlwMdaIKgPXq?p=preview

Dynamic function calling Angular 2

2 Answers2

Linked