Invoke a function within an Angular component that is passed in as a parameter

Question

Invoke a function within an Angular component that is passed in as a parameter

Is it possible to invoke a function using a string in JavaScript?

I have a scenario where I receive a string as the function name, and I need to call and run that function. However, my current code is not working as expected.

Below is the code snippet I tried:

 linkAction(attr,url){
      if(attr == 'click'){
        debugger
        let eventName = Object.keys(url)[0];
        this[eventName];
      }else{
        window.open(url, "_blank");
      }
    }

Unfortunately, this code does not successfully call the method as intended.

angular typescript angular6

Answer 1

Answer №1

See the Demo

Here is an example of how you can implement this:

.html

<button (click)="linkAction('click', 'test')">Click me </button>
<button (click)="linkAction('url', 'www.example.com')">Click me URL </button>

.ts

  linkAction(attr, item) {
    if (attr == "click") {
      this[item]();
    } else {
      if (item !== "" && item !== undefined) {
        if (item.includes("http")) {
          window.open(item, "_blank");
        } else {
          window.open(`https://${item}`, "_blank");
        }
      }
    }
  }

  test() {
    alert("test function called");
  }

Answer 2

See the Demo

Here is an example of how you can implement this:

.html

<button (click)="linkAction('click', 'test')">Click me </button>
<button (click)="linkAction('url', 'www.example.com')">Click me URL </button>

.ts

  linkAction(attr, item) {
    if (attr == "click") {
      this[item]();
    } else {
      if (item !== "" && item !== undefined) {
        if (item.includes("http")) {
          window.open(item, "_blank");
        } else {
          window.open(`https://${item}`, "_blank");
        }
      }
    }
  }

  test() {
    alert("test function called");
  }

Invoke a function within an Angular component that is passed in as a parameter

Answer №1

Similar questions

The functionality to generate personalized worldwide timezone pipe is not functioning

Utilizing history in React with Typescript: A step-by-step guide

Troubleshooting the error message "Encountering issues with Module build failed (from ./node_modules/postcss-loader/src/index.js)"

Tips for validating the request body prior to sending in Angular unit testing

Ways to initiate a fresh API request while utilizing httpClient and shareReplay

The use of props within components is broken in the interface of Nuxt and Vuejs

Error thrown by webpack: Module 'pug' not found when attempting to access get-api

TypeError: describe is not a function in the Mocha testing framework

Are there any potential risks in sticking with Angular 2 instead of upgrading to a newer version?

Creating a hierarchical visualization in Angular using a JSON object array

Unlocking the Secrets of Passing ID Parameters Between Pages and Fetching Data from External APIs in Ionic 4

Replacing a component dynamically within another component in Angular 2

Reacting to Appwrite events in a React Native environment

Have you considered using Compodoc for documenting Storybook components?

In Vue using Typescript, how would I go about defining a local data property that utilizes a prop as its initial value?

How can you add or remove an item from an array of objects in Angular/RXJS using Observables?

Webpack, TypeScript, and modules are set to "esnext," resulting in a change to undefined

Issue with Angular 2: MaterializeCSS module not loading correctly when using routing

The use of findDOMNode has been marked as outdated in StrictMode. Specifically, findDOMNode was utilized with an instance of Transition (generated by MUI Backdrop) that is contained

What steps can be taken to retrieve error.data from RTK Query while utilizing typescript?