What is the best way to invoke a method from a parent component in Angular 4, from within a child component, using a

Currently, I am facing an issue with calling a method from the child component to the parent component in Angular 4 using .emit();

In my app.component.html file:

<parent-component (loadMoreData)="loadData()"></parent-component>

The Parent Component's HTML looks like this:

<div>
  <child-component [dataList]="dataList"></child-component>
</div> 

Inside the Parent Component.ts file,

public dataList : Array<any>;

constructor() {
    this.loadData();
  }

  ngOnInit() {

  }

  loadData(){
    //const options = this.getOptions();
    this.appServices.getDataList().subscribe((response) => {
      const respJson = response;
      this.dataList = respJson;
      console.log(this.assayDataList);
    });
  }

And in the Child component.ts file,

@Output() loadMoreData : EventEmitter<boolean>;

public getRowData():Promise<any[]>{
    var self = this;
    return new Promise((resolve)=>{
      self.loadMoreData.emit(true);
      resolve(this.assayTableData);
    })
  }

However, I'm encountering an error message:

Error: Uncaught (in promise): TypeError: Cannot read property 'emit' of undefined

I'm puzzled by this error. Can someone guide me on what could be wrong here?

Answer №1

Ensure to initialize the EventEmitter in the Child component.

@Output() loadMoreData : EventEmitter<boolean> = new EventEmitter<boolean>(false);

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

Distilling the Essence of "Deity" in Handling Runtime Errors

Working with a client who has a unique "God" component for creating form fields can be quite challenging. The complexity arises from the fact that we are using material design for non-mobile platforms and Ionic for mobile platforms. This special component ...

How is it possible for a TypeScript function to return something when its return type is void?

I find the book Learning JavaScript to be confusing. It delivers conflicting information regarding the use of void as a return type in functions. const foo = (s: string): void => { return 1; // ERROR } At first, it states that if a function has a re ...

Communication between Angular components

My question is exactly as the title suggests. Let me explain what I need to do. Currently, I have a component widget. Whenever I click on this widget, a modal pops up with several items inside. Each item corresponds to a different section within the main ...

Setting the UseState value with data received from trpc response

I am attempting to set the initial value of the UseState as the first and last names of my users based on the response received from the tRPC API. const { data: sessionData } = useSession(); const { data: currentUser } = api.user.get.useQuery( ...

Do ES6 features get transpiled into ES5 when utilized in TypeScript?

After implementing ES6 features such as template strings, arrow functions, and destructuring in a TypeScript file, I compile the code to regular JavaScript... Does the TypeScript compiler also compile the ES6 syntax, or do I need to utilize another compil ...

Error in TypeScript MSBuild: URI creation from *.js & .map.js has failed

I recently integrated the TypeScript.MSBuild NuGet package into two different projects. (Just tested it with version 2.7.2.) Locally, everything runs smoothly. On Kudu, the build process is successful as well. However, on travis-ci and Bitbucket's p ...

Tips for implementing a multi-layered accumulation system with the reduce function

Consider the following scenario: const elements = [ { fieldA: true }, { fieldB: true }, { fieldA: true, fieldB: true }, { fieldB: true }, { fieldB: true }, ]; const [withFieldA, withoutFieldA] = elements.reduce( (acc, entry) => ...

Issue accessing member value in inherited class constructor in Typescript

My situation involves a class named A, with another class named B that is inherited from it. class A { constructor(){ this.init(); } init(){} } class B extends A { private myMember = {value:1}; constructor(){ super(); ...

A versatile Typescript array serving both as a storage for type information and input parameters

Our API is designed to handle a large amount of data, allowing users to control which properties are returned by using the fields parameter. The API definition looks like this: interface Foo { A?: string; B?: number; C?: boolean; D?: string ...

Is it possible to send all API requests through the server side in an Angular Universal application?

I have integrated angular universal into my angular project and I am looking to ensure that all API requests, both post and get, are made from the server side rather than the client side. Is it possible to achieve this functionality in Angular? For exampl ...

Add a unique class to an element within a main component

Within our application root, there exists a sidebar consisting of a list. We utilize uiSrefActive to apply an active class to the selected list item upon clicking it. However, once you navigate away from that component, the original list item loses its a ...

Locate an element within an array of strings to refine the contents of a flatlist

Currently, I have a FlatList that I am attempting to filter using multiple inputs from dropdown selectors. Here is the code snippet for my FlatList component: <FlatList style={styles.list} data={data.filter(filteredUsers)} ...

rxjs iterates through an array executing each item in sequential order

Is there a way to make observables wait until the previous one has completed when they are created from an array? Any help is appreciated! export class AppComponent{ arr: number[] = [5, 4, 1, 2, 3]; fetchWithObs() { from(this.arr) ...

The error message "sh: 0: Can't open /docker-entrypoint.sh" indicates that the specified

Being new to Docker, I am in need of guidance on running an Angular application and containerizing it with Docker. Dockerfile: WORKDIR /usr/src/app ENTRYPOINT ["sh", "/docker-entrypoint.sh"] COPY package.json package-lock.json ./ R ...

Guide to automating git pull from a remote repository

Imagine a scenario where a user is actively working on an angular project on system A, with a remote repository on Github. The same project also exists on a server that is linked to the repo. If the user makes changes and pushes them to the remote repo us ...

Unlock the full potential of ngx-export-as options with these simple steps

Being a newcomer to angular, I am currently working with a datatable to display a set of data. I have successfully implemented the functionality to export the table's data as a PDF using ngx-export-as library. However, when downloading the PDF, it inc ...

Tips on enforcing Access-Control-Allow-Origin in a C# webservice hosted on IIS

I have a .net webservice running on IIS 10. My goal is to retrieve data from the backend using an Angular frontend. Access-Control-Allow-Origin is configured in IIS: https://i.sstatic.net/JeTGR.png In addition, customHeaders are set up in my Web.Conf: h ...

Angular error message TS2339 is stating that there is no property called 'data' available on the specified Object type

Hi there, I'm just starting out with Angular and I've run into a bit of a problem. An error keeps popping up saying that the property 'data' can't be found in the API object I'm trying to retrieve data from. I'm fetching ...

Are there alternative methods for including an IF statement within nested subscriptions with RxJS?

Is there a way to determine if the second observable should be subscribed to based on the result of the first one? After researching other discussions and exploring the RxJS documentation, it seems that nesting subscriptions is something to avoid when poss ...

Angular 4: Harnessing the Power of Pipe Chaining

While using the *ngFor directive, I am attempting to apply multiple pipes but I'm encountering difficulties getting it to function properly. <tr *ngFor="let order of orders | filter:filter; let i=index | paginate: {itemsPerPage:7 , currentPage:p}" ...