Retrieve the callback function assigned to an eventEmitter in Angular 4

Is there a way to retrieve the function passed to the Event Emitter?

Within my component, I am passing a function to an event emitter as shown below:

<component (onClick)='function(parameter)'></component>

I have set up an @Output in the component to receive the function and emit it when clicked like so:

@Output() onClick: EventEmitter<any> = new EventEmitter<any>();
<button (click)="onClick.emit($event)">

Is there a way for me to access the function that is passed to the component? Any suggestions would be appreciated.

angularfunctiontypescriptparameterseventemitter

Answer №1

Absolutely, that can be done

Assume you have an addition function in your child component.

@Output() onClick: EventEmitter<any> = new EventEmitter<any>();

public add(a: number, b: number): number {
  return a + b;
}

When the button is clicked, you can emit the function

<button (click)="onClick.emit(add)">Add</button>

In the parent component, you can listen for events from the child component.

<component (onClick)='someFunc($event)'></component>

and call the function when the event occurs.

someFunc(add: any) {
  const result = add(5, 5);
  console.log('The result is', result);
}

Answer №2

To improve your code, consider using the following syntax:

<component (onClick)='function($event)'></component>

as an alternative to

<component (onClick)='function(parameter)'></component>

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 should a React Testing Library wrapper be properly typed in a TypeScript environment?

There's this code snippet from Kent C. Dodd's library that I find extremely helpful import * as React from 'react' import {render as rtlRender} from '@testing-library/react' import {ThemeProvider} from 'components/theme& ...

reactjstypescriptreact-testing-library

Caution: Updating a component is not possible during the rendering of another component. ReactJS

I am encountering an error in my ReactHooks/Typescript application with a Navigation component that renders a PatientInfo component. The PatientInfo component is conditionally rendered based on the props it receives, determined by a searchbox in another ch ...

javascriptreactjstypescript

Issue with Filtering Function in Kendo Angular 2 Grid

I have recently started incorporating the Kendo Grid with Angular 2 by following the guidelines in this tutorial: http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/. However, I am facing a challenge as I am unable to locate the filteri ...

angularkendo-ui-angular2

Using the `window` object in Jasmine with Angular, a mock can be created for testing purposes

In my current project, I have a function that I need to write unit tests for. Within this function, I am comparing the global objects window and parent using const isEqual = (window === parent). I am wondering what would be the most effective way to mock ...

angulartypescriptunit-testingjasmine

Tips for broadcasting a router event

Currently, I am working with 2 modules - one being the sidenav module where I can select menus and the other is the content module which contains a router-outlet. I am looking for the best way to display components in the content module based on menu selec ...

javascriptangularroutereventemitterrouter-outlet

Error dealing with string parameter in NHibernate SQL query

Encountering an issue with the following code: string sql = "select distinct ruoli.c_tip_usr" + " from vneczx_ute_app_trn ruoli" + " join vnecyd_ent_prf ind" ...

sqlnhibernateparameters

Error in Angular ngFor loop: Type 'OrderItem' is not compatible with type 'Iterable<any>'

In my HTML code, I have the following structure: <div class="grid mb-5" *ngFor="let orderItem of order.orderItems"> <div class="col-2">{{ orderItem.product.name }}</div> <div class="col-2&qu ...

angularngfor

Exploring the potential of Angular2's WebSocket service by efficiently accessing the parent component

I need some assistance with implementing WebSockets in my angular2 application. However, I've encountered a minor issue that I can't seem to solve. Here's what I have so far: I've created a service that has a method for creating a WebS ...

angularwebsocketangular2-servicesangular2-components

The use of async/await within an observable function

I am looking to establish an observable that can send values to my observers. The issue lies in the fact that these values are acquired through a method that returns a promise. Is it possible to use await within the observable for the promise-returning f ...

angulartypescriptpromiserxjsobservable

error: encountering issue with Vue TypeScript Jest tests - '$store' property is undefined

I've been facing issues with my tests failing after a recent npm install. I've tried adjusting versions up and down, but haven't had any success. Interestingly, the $store isn't directly used in any of the components or tests. Despit ...

typescriptvue.jsjestjsts-jestvue-composition-api

An error occurred in the ngrx store with Angular during production build: TypeError - Unable to access property 'release' of undefined

After deploying my application and running it, I encountered an issue that seems to be happening only during production build at runtime. At this point, I am uncertain whether this is a bug or if there is a mistake in my code. The error "TypeError: Cannot ...

angulartypescriptngrxngrx-store

What is the best way to declare a collection of objects in TypeScript?

Need assistance with TypeScript - Can anyone help? I'm having trouble deciphering the error message in relation to the code snippet below. My goal is to create an array of objects, but it doesn't seem to be working as expected. interface FieldC ...

typescript

What is the equivalent bundle size limit in bytes for the limitBytes value in the Rollup plugin analyzer?

I recently integrated the rollup plugin analyzer into my ReactJS project. While exploring the "CI usage example" section in the documentation, I noticed a variable named const limitBytes = 1e6 const limitBytes = 1e6 const onAnalysis = ({ bundleSize }) =& ...

reactjstypescriptbundlerolluprollupjs

Track changes and save only the updated elements in an array

Currently, I am utilizing Angular for the front end, C# for the backend, and an Oracle database for a project with a company. Within the grids provided to me, there are more than 120 records that users can edit individually. My dilemma lies in identifyin ...

javascriptarraysangularjsangular

Clicking on an Angular routerLink that points to the current route does not function unless the page is re

Currently, I am working on an E-commerce project. In the shop page, when a user clicks on the "View More" button for a product, I redirect them to the product details page with the specific product id. <a [routerLink]="['/product-details' ...

javascriptangulartypescript

Storing randomly generated numbers using C programming

I'm currently on the hunt for an optimal method to store a series of randomly generated numbers with the purpose of recalling them later in another function. Specifically, I have one function responsible for creating the numbers and ensuring they do n ...

carraysfunctionrandom

Tips on incorporating esbuild extensions in the template.yaml file of AWS SAM

Currently, my TypeScript Lambda functions are managed using the AWS Serverless Application Model (SAM), and I rely on esbuild for the build process. I'm interested in incorporating esbuild plugins into my build process to enable support for TypeScrip ...

typescriptaws-lambdaserverlessaws-samesbuild

What is the solution for handling the error 'Mismatch between argument types and parameters' in TypeScript while using React Navigation?

Encountered an issue while trying to utilize Typescript in ReactNavigation and received an error from my IDE (WebStorm). Here is my Navigator: export type RootStackParamList = { AppStack: undefined; AuthStack: undefined; }; const RootStack = crea ...

typescriptreact-nativereact-navigation

Is it possible to configure a unique Bearer Access Token in the "angular-oauth2-oidc" library?

For my Facebook login, I have set up a custom endpoint where the client sends the Facebook access token. In my Ionic App, I use the '@ionic-native/facebook/ngx' package to retrieve this token. Within a Laravel Json API controller, I utilize Soci ...

phptypescriptionic4laravel-socialiteangular-oauth2-oidc

Obtain a Spotify Token and showcase information in next.js

This is a Simple Next.js component designed to display the currently playing song on Spotify. Context: Utilizing app Router Due to Spotify's token requirements necessitating a server-side call, the entire request is made to fetch the song from an ...

javascripttypescriptnext.jsspotify