Using ngFor to dynamically call functions

Question

Using ngFor to dynamically call functions

In my code, I have an array called 'actionsArray' which contains objects of type 'Action'. Each Action object has two parameters: the function name and a boolean value (which is currently not important).

let actionsArray: Action[] = [{name:"save",enabled:true},{name:"describe",enabled:true},{name:"delete",enabled:true}]

To display a list of functions using ngFor, I want to dynamically bind the "click" event of each Action to its corresponding function.

<li *ngFor="let action of actionsArray">
        <button (click)="this[action.name]()"> {{action.name}} </button>
</li>

I have tried various methods but have not been successful so far.

angular typescript

Answer 1

Answer №1

I implemented your code in a CodePen and it functions properly. Additionally, I incorporated an alternative switch/case method.

@Component({
  selector: 'my-app',
  template: `
    <li *ngFor="let action of actionsArray">
        <button (click) ="[action.name]()"> {{action.name}} </button>
        <button (click) ="callAction(action.name)"> {{action.name}} </button>
    </li>
  `
})
class AppComponent {  
  actionsArray: {name: string, enabled: boolean}[] = [{name:"save",enabled:true},{name:"describe",enabled:true},{name:"delete",enabled:true}]

  callAction(actionName: string) {
    switch(actionName){
      case 'save' : return this.save();
      case 'describe' : return this.describe();
      case 'delete' : return this.delete();
    }
  }

  save() {
    alert('save');
  }

  describe() {
    alert('describe');
  }

  delete() {
    alert('delete');
  }
}

Answer 2

I implemented your code in a CodePen and it functions properly. Additionally, I incorporated an alternative switch/case method.

@Component({
  selector: 'my-app',
  template: `
    <li *ngFor="let action of actionsArray">
        <button (click) ="[action.name]()"> {{action.name}} </button>
        <button (click) ="callAction(action.name)"> {{action.name}} </button>
    </li>
  `
})
class AppComponent {  
  actionsArray: {name: string, enabled: boolean}[] = [{name:"save",enabled:true},{name:"describe",enabled:true},{name:"delete",enabled:true}]

  callAction(actionName: string) {
    switch(actionName){
      case 'save' : return this.save();
      case 'describe' : return this.describe();
      case 'delete' : return this.delete();
    }
  }

  save() {
    alert('save');
  }

  describe() {
    alert('describe');
  }

  delete() {
    alert('delete');
  }
}

Using ngFor to dynamically call functions

Answer №1

Similar questions

Suggestions for enhancing or troubleshooting Typescript ts-node compilation speed?

Customizing AxiosRequestConfig with Axios in TypeScript can greatly enhance the functionality and

What is the process for inputting a predefined function into an interface?

One cannot use a type alias as the parameter type for an index signature. It is recommended to use `[key: string]:` instead

`Square payment integration using the mean stack technology stack`

Having trouble navigating to a child page in Angular 4

Executing the Ionic code within the Xcode Swift environment

How can I implement a redirect back to the previous query page post-authentication in Next.js 13?

How come webstorm/react-hook-forms isn't showing me suggested choices for the "name" field?

Working with base URL and relative paths in Angular 2 on GitHub Pages

Creating a Dynamic Download Link in Angular 6

The package information could not be loaded from the registry due to an error: The "timeout" parameter must be in numerical form. Instead, it was received as a string ('100000')

Tips on preventing duplicate class properties when they are declared separately from the constructor and then initialized

Currently, I am utilizing version 6.10.0 of @mui/x-date-pickers. I am interested in learning how to customize the color and format of a specific component within the library

Issues with Cross-Origin Resource Sharing (CORS) have been identified on the latest versions of Android in Ionic Cordova. However, this problem does not

Integrating a packaging NPM functionality into Angular for streamlined development

Instructions for opening a URL in a new tab using Angular

Using TypeScript to declare ambient types with imported declarations

What is the procedure for setting up the typings folder in AngularJS 1.5 with TypeScript?

Extending Partial Interface in a Typescript Class