How to create function name from json in Angular 7

Question

I have to create dynamic button from json file. My JSON is as per below:

{ button : { title : "Submit", event : "FunctionName", color : "white".... }}

My Component:

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

export class App {
  FunctionName:string;
  value: string;
  constructor() {
    this.FunctionName = button.FunctionName;
  }

  Button.FunctionName(){ //<-----How can I give name from JSON
    this.value = "button clicked";
  }
}

My function name is coming from JSON file. so How can I create such function in my TS file?

Enhancement of Dynamic function calling Angular 2

Possible duplicate of How to dynamically set a function/object name in Javascript as it is displayed in Chrome — Roberto Zvjerković
– Roberto Zvjerković, Commented Jul 3, 2019 at 11:02
What problem are you really trying to solve here? This looks like a XY problem. xyproblem.info — Reactgular
– Reactgular, Commented Jul 3, 2019 at 11:47
Nope, it isn't XY Problem. My Question is straight forward. I want to call dynamic function named as "EVENT" in json data — Hardik Gondalia
– Hardik Gondalia, Commented Jul 3, 2019 at 11:56

Adrita Sharma · Accepted Answer · 2019-07-03 12:42:55Z

2

Try like this:

{ button : { title : "Submit", event : () => this.FunctionName(), color : "white".... }}

If you cannot change the json, then this might work:

HTML:

<input type="button" value="click here" (click)="callFunction(FunctionName)">

TS:

callFunction(functionName:string) {
    let comp_obj = new ClassComponent();
    comp_obj[functionName]();
}

From stackbiltz: Add this in TS

 callFunction(FunctionName: string) {
    let x = new AppComponent();
    x[FunctionName]();
  }

  enrollmentFormProblem() {
    alert("enrollmentFormProblem called")
  }

HTML:

<button (click)="callFunction(dynamicButton[0].event)">{{this.dynamicButton[0].description}}</button>

To add the function dynamically with having it predefined, do this:

callFunction(FunctionName: string) {
    let x = new AppComponent();

    x[FunctionName] = new Function (
      console.log(`${FunctionName} created`)
    )
  }

edited Jul 3, 2019 at 12:42

answered Jul 3, 2019 at 11:03

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

5 Comments

Hardik Gondalia Over a year ago

I can not change value in JSON file, as it is coming from API. I can only Change in Angular code

Adrita Sharma Over a year ago

Try this, Editted the answer. I haven't tested it though, if it doesn't work, please share a stackbiltz

Hardik Gondalia Over a year ago

will it work if I change event value to some other value without changing enrollmentFormProblem name? like if event : "submitEvent", it will call enrollmentFormProblem event?

Adrita Sharma Over a year ago

Whatever function name you add in the event, that function has to be present in the class. That's all

Hardik Gondalia Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

How to create function name from json in Angular 7

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related