👀 Views: 36 💬 Answers: 1 📅 Created: 2025-06-12

angular eventemitter component-communication TypeScript

I'm having trouble with component communication in Angular 15 using `EventEmitter`... I have a parent component that contains a child component, and I want to emit an event from the child to update a property in the parent. The event is being emitted, but the parent doesn't seem to respond correctly to the emitted value. Here's the setup: In my child component, I have the following code: ```typescript import { Component, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'app-child', template: `<button (click)="sendData()">Send Data</button>` }) export class ChildComponent { @Output() dataEmitter = new EventEmitter<string>(); sendData() { const data = 'Hello from Child'; this.dataEmitter.emit(data); } } ``` In the parent component, I'm trying to capture this event like so: ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-parent', template: `<app-child (dataEmitter)="receiveData($event)"></app-child>` }) export class ParentComponent { receivedData: string; receiveData(data: string) { this.receivedData = data; console.log('Received Data:', this.receivedData); } } ``` When I click the button in the child component, I see the console log in the parent, but I also get an behavior in the console that says `behavior TypeError: want to read properties of undefined (reading 'dataEmitter')`. It seems like the parent doesn't recognize the child component properly. I've checked the module imports and everything seems fine. The structure of my module looks like this: ```typescript import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { ParentComponent } from './parent.component'; import { ChildComponent } from './child.component'; @NgModule({ declarations: [AppComponent, ParentComponent, ChildComponent], imports: [BrowserModule], bootstrap: [AppComponent] }) export class AppModule {} ``` I've tried reordering the imports, checking the selector names, and even refreshing the application, but nothing seems to work. Any suggestions on what might be going wrong here? I'm coming from a different tech stack and learning Typescript.