Calling functions dynamically in Angular 2

I am facing an issue where I have a function name stored in a variable and I am trying to assign that variable to a click event of a button, but it doesn't seem to be working. Can anyone provide assistance with 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:string;
  value: string;
  constructor() {
    this.FunctionName = 'clickFunction'
  }

  clickFunction(){
    this.value = "button clicked";
  }
}

Here is the code

Plunker Code

Answer №2

give this a shot

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Click function is: {{ClickFunction}}</h2>
      <input type="button" value="click here" (click)="ClickFunction()">
    </div>
    <p>{{result}}</p>
  `,
})
export class App {
  ClickFunction: any;
  result: string;
  constructor() {
    this.ClickFunction = this.handleButtonClick; //assign function to variable.
  }

  handleButtonClick(){
    this.result = "button clicked";
  }
}

Check out the demo: https://plnkr.co/edit/6uVZd0L0KlwMdaIKgPXq?p=preview

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

How to eliminate all special characters from a text in Angular

Suppose I receive a string containing special characters that needs to be transformed using filter/pipe, with the additional requirement of capitalizing the first letter of each word. For instance, transforming "@!₪ test stri&!ng₪" into "Test Stri ...

What steps should I take to resolve the missing properties error stating '`ReactElement<any, any>` is lacking `isOpen` and `toggle` properties that are required by type `SidebarInterface`?

I've encountered an issue with two React components that appear to be configured similarly. The first component is a Navbar: type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & { ...

Exploring Angular's APP_INITIALIZER: Comparing Promises and Observables

I have implemented an Angular v4 application where I need to retrieve settings from the server before the app starts. This is achieved using the APP_INITIALIZER: { provide: APP_INITIALIZER, useFactory: initializeSettings, deps: [SettingsService], ...

When using SSL/TLS certificate, Angular requests to ASP.NET may result in an "Error Unknown" message

After encountering a troublesome issue, I have yet to find a solution for the following problem: My Angular application makes multiple HTTP requests to asp.net. Asp.net processes the requests (token verification, etc.) and returns the data in order. The is ...

Adjust the orientation of the mat-slide-toggle

Is there a way to change the direction of a mat-slide-toggle from right-to-left to left-to-right without involving the text or label position? I want the switch itself to be on the right when off and on the left when on. I have considered inverting the va ...

Tips on clearing local storage when the browser is closed or a tab is closed in JavaScript, Angular, and React

Is there a way to automatically remove local storage or session storage data when closing the browser? Specifically, how can I delete the local storage details only when closing the final tab of a website with multiple tabs open? I've attempted variou ...

Tips for updating property values when calling a TypeScript function

Hello everyone, I am looking to convert a snippet of JavaScript code into TypeScript. JavaScript function newState(name){ var state ={ name : name, age : 0 } return state } function initStates() { this.JamesStat ...

What could be causing ConnectedProps to incorrectly infer the type?

My redux state is rooted and defined as: interface RootState { users: User[] } When working with components, I want to utilize ConnectedProps to generate the props type automatically from my state mapping and dispatch mapping: const mapState = (state: ...

Tips for determining the defaultValue type in React.context usage

'use client'; import { useState, createContext, useMemo } from 'react'; type MessageStatus = 'default' | 'success' | 'error'; export type MessageProps = { type: MessageStatus; payload: string; }; ty ...

When attempting to assign a 'string' type to the @Input property, I am receiving an error stating that it is not assignable to the 'PostCard Layout' type

Encountering an issue The error message 'Type 'string' is not assignable to type 'PostCard Layout'' is being displayed A parent component named page-blog.component.html is responsible for defining the class styles and passi ...

Unable to set items as sticky within mat-tabs

Is there a way to make my image stick in place using the following CSS code? position: -webkit-sticky; position: sticky; top: 1px; I have tried implementing it but haven't been successful. HTML: <mat-tab-group class="user-tabs" (selectedTa ...

Ways to transfer selected options from a dropdown menu to a higher-level component

I am currently in the process of configuring a modal component that showcases various data from a specific record to the user. The user is provided with a Bulma dropdown component for each field, enabling them to make changes as needed. To streamline the c ...

What are the steps to incorporate web components into a Vue project with Typescript?

I am currently facing an issue with integrating a web component into my Vue project. Despite seeing the element in the DOM, it appears as an empty tag instead of the button it should be. The first error I encountered was the absence of a declared module. ...

In the CallableFunction.call method, the keyword "extends keyof" is transformed into "never"

In the following method, the type of the second parameter (loadingName) is determined by the key of the first parameter. (alias) function withLoading<T, P extends keyof T>(this: T, loadingName: P, before: () => Promise<any>): Promise<void ...

Typescript: The ConstructorParameters type does not support generics

Incorporating TypeScript 3.7, I created an interface featuring a property designed to accept a constructor function: interface IConstruct<T> { type: new (...args:ConstructorParameters<T>) => T; } I initially assumed that IConstruct<Us ...

Error encountered during Angular CLI's production build: TypeError - Attempting to access property 'kind' of an undefined value

To view the error message, click here { "@angular-devkit/build-angular": "~0.803.19", "@angular/cli": "~8.3.19", "@angular/compiler-cli": "~8.2.14", "@angular/language-service": "~8.2.14", "@types/jasmine": "~3 ...

Angular2 date input field unable to restrict minimum and maximum dates

Having trouble with dynamic min and max attributes not being recognized in ionic2 when using the 'datetime-local' type. <ion-input value="" type="datetime-local" [formControl]="expdate" [attr.min]="mindate" [attr.max]="maxdate"></ion-in ...

Type of Multiple TypeScript Variables

Within my React component props, I am receiving data of the same type but with different variables. Is there a way to define all the type variables in just one line? interface IcarouselProps { img1: string img2: string img3: string img4: string ...

An assortment of diverse data types in TypeScript arrays

Considering adding type to my existing API, I have a function that can accept a string, function, or object (utilizing overloading). However, it is also able to accept an array of mixed values. Is there a way to have an Array in TypeScript that consists o ...

The 'Event' type is lacking the specified properties when compared to the 'CdkDragDrop<string[], string[]>' type

After exploring the reorderable columns demo on stackblitz, I came across this interesting code snippet. Specifically, here is the HTML snippet: <table mat-table [dataSource]="dataSource" cdkDropList cdkDropListOrientati ...