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

eko · Accepted Answer · 2017-02-08 06:51:49Z

20

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 8, 2017 at 6:51

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

8 Comments

amansoni211 Over a year ago

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?

eko Over a year ago

@amansoni211 but the child components template scope will be out of the parents scope. I don't think that will work.

amansoni211 Over a year ago

Will this work if I define this function in parent component? call it in childs template like we are doing above.

eko Over a year ago

@amansoni211 isn't it the same thing with your previous comment? Create a new question about it maybe with a clear usage?

Hardik Gondalia Over a year ago

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

|

Tiep Phan · Accepted Answer · 2017-02-08 06:54:48Z

2

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

answered Feb 8, 2017 at 6:54

Tiep Phan

12.6k3 gold badges40 silver badges44 bronze badges

Collectives™ on Stack Overflow

Dynamic function calling Angular 2

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related