Can an Angular Component be connected to an array of functions for callbacks?

I am working on an Angular component that shows a list of items.

I want each item in the list to have a set of menu buttons that trigger different functions in the parent component/controller.

Is there a way to create a component binding that accepts an array like this:

[
    {Name: 'Edit', Callback: editItem(item)},
    {Name: 'Delete', Callback: deleteItem(item)},
    {Name: 'Add', Callback: addItem(item)},
]

Then I can use an ng-repeat in the component template to display the buttons with their respective click actions.

I attempted to set up the binding as follows, but it doesn't appear to be working:

binding = {
    actions: '&'
}

Answer №1

While it is not the most advisable approach, you have the option to:

Create an object, including various function fields, etc:

function example() {}
activities = {
  bar : example, bars : [example, example, example]
}

Then, utilize 2-way binding to pass it: activities: '=' In this scenario, you don't need to worry about arguments and can invoke the callback in the component like this:

activities.bars[2](arg1, arg2, arg3)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on merging the root route with child routes using react router v6

When a user visits "/", I want it to automatically redirect them to "/todo", but this functionality is not working as expected. let router = createBrowserRouter([ { path: "/", element: <Layout />, children: ...

Is there a way to integrate PHP functionality into JavaScript?

When it comes to using JavaScript and PHP together, a common challenge is retrieving information from a database and utilizing that data in a JavaScript function. In my case, I need this functionality for implementing password change functionality on a w ...

Ensuring seamless user recognition when redirecting them to a new HTML page

In our web application, new users are assigned a standard password upon registration. Upon logging in with the standard password, they are automatically redirected to a 'change Password' page where they can update their password. However, we hav ...

Unable to transfer an array from getStaticProps method in Next.js

Whenever I pass a JSON array from getStaticProps in Next.js, I encounter this specific error message when trying to access it. TypeError: Cannot read property 'contentBody' of undefined module.exports../pages/[author]/[article].js.__webpack_expo ...

Improving user input in AngularJS

My goal is to create a filter that converts time into seconds, such as: 01:30:10 becomes 5410, and vice versa. This way, the model only holds seconds while providing users with a more user-friendly representation. I've successfully implemented a work ...

What could be causing the empty object return from the Async function in my Typescript code on Next JS?

Encountering issues with an async function. In the ../lib folder, I have a class for handling data from an API website. However, when attempting to load the API data within an async function, I encounter difficulties. The async function does not return a ...

Postman: Iterating through requests with various input data sets to dynamically generate the request body

I am facing a challenge with my login API request that requires 3 parameters (userName, password, and remember) in the request body. Out of these parameters, userName and password are mandatory, while remember is optional. The input data is being pulled fr ...

Upgrade angular-chart.js when applied to a filtered collection

I recently started working with Angular and encountered an issue while incorporating Angular Charts JS. I have a list that can be filtered using search text, and I want my charts to update whenever the list is filtered. What would be the best approach to ...

Setting the axios baseURL configuration globally in Nuxt.js

When starting a new project, you can use the following command: npm init nuxt-app <project-name> To set up the baseURL for axios, refer to this guide: npm install @nuxtjs/axios In your nuxt.config.js file: modules: [ '@nuxtjs/axios' ...

Using a ternary condition within the ngClick directive

Trying to implement different functionalities based on the type of device. The setting tab is clickable, and in the desktop version, clicking should redirect to a default URL. However, on mobile devices, clicking the same link should open a modal window. ...

Switch the style sheets after the content

How can I create a toggle effect on the :after property, switching between + and - each time the link is clicked? I've attempted to achieve this using JavaScript, CSS, and HTML, but the code only changes + to - and doesn't switch back when the l ...

Say goodbye to my HTML5 creations

I am currently working on an HTML5 grid project that involves implementing a rectangle select tool for use within the grid. Everything is going smoothly, except for the fact that when I attempt to use the rectangular select tool, the grid disappears from t ...

There was an error while trying to read the properties of undefined (specifically the state). Make sure to include this.state.a

I am struggling with an error that I have never encountered before. Despite having experience working with functional components, I am new to class components. I used create react app to install the application, but it seems like I might be missing a req ...

Retrieving a database value in Node.js Firestore containing a space

Hello, I'm just getting started with node Js and I anticipate that it will be a smooth ride! Currently working on an application using node JS with Firestore where I need to retrieve data like "display name": James and "Age": 22 Since Age does not h ...

ExpressJS exhibits unique behavior based on whether the API is requested with or without the specified PORT number

I have encountered an issue with my 2 flutter web apps. One of them is functioning flawlessly when I request the URL, but the other one only works when I include the port xxxxx:4000/nexus-vote. However, when I remove the port, I receive a status code of 20 ...

Issue with Bootstrap v3.3.6 Dropdown Functionality

previewCan someone help me figure out why my Bootstrap dropdown menu is not working correctly? I recently downloaded Bootstrap to create a custom design, and while the carousel is functioning properly, when I click on the dropdown button, the dropdown-menu ...

How do I set a new value for a variable from within a function?

After retrieving initial numbers from a JSON file, I want to update them using an ajax call. How do I go about replacing the values of homePoints and awayPoints with the new ones fetched through ajax? I have reviewed the provided answers but none seem to ...

How to enhance a jQuery tab control by implementing custom JavaScript forward and back arrows?

Although there are other questions related to this topic, mine is unique. I have a scrolling jQuery feature that utilizes tabs for selection and is automated. Modifying the layout is challenging because it is dynamic and depends on the number of items in t ...

Certain cases will see success with iPhone jquery/ajax functionality, while others may encounter

I am facing an issue with multiple pages in my project that utilize AJAX to submit a form to django. While the buttons work perfectly on various platforms and browsers like Chrome, Firefox, and desktop Safari, they seem to malfunction specifically on mobil ...

Top method to create a timer in React/Redux for automatically refreshing authentication tokens

I am implementing an access refresh jwt authentication flow and need the client to automatically send a refresh token after 10 minutes of receiving the access token. I also want to ensure that if the user's device is idle for an hour, a new access tok ...