Child Component not able to subscribe to the EventEmitter through the service

Question

The Subscribing Component "pop-list.component.ts" :

import { Component, OnInit } from '@angular/core';
import { ChildCommService } from '../child-comm.service';

@Component({
 selector: 'app-pop-list',
 templateUrl: './pop-list.component.html',
 styleUrls: ['./pop-list.component.css'],
 providers: [ChildCommService]
})

export class PopListComponent implements OnInit {
 recievedItem: any;
 constructor(private _childService: ChildCommService) { }
 ngOnInit() {

 this._childService.popItemSelected
 .subscribe(
 (itemToPop) => {
 this.recievedItem = itemToPop;
 }
 );
 }
}

The Subscribing Component HTML:

<hr style="width: 300px;">
<h3>Popped Content</h3>
<div style="border: 2px; background-color:lightgrey ; width:300px;">
 <ul>
 <li>{{recievedItem}}</li>
 </ul>
</div>

The Service "ChildCommService.service.ts":

import { Injectable, EventEmitter } from '@angular/core';

@Injectable()
export class ChildCommService {
 popItemSelected = new EventEmitter<any>();
 constructor() { }
}

The Emitter Component "details.component.ts":

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { ChildCommService } from '../child-comm.service';

@Component({
 selector: 'app-details',
 templateUrl: './details.component.html',
 styleUrls: ['./details.component.css'],
 providers: [ChildCommService]
})
export class DetailsComponent implements OnInit {
 @Input() list;
 @Output() selectedItem= new EventEmitter();
 @Output() reduceCount= new EventEmitter();
 itemToPop ='';
 onSelect(item: string): void {
 this.selectedItem.emit(item);
 }
 constructor(private _CommService: ChildCommService ) { }
 popItem(item){
 this.itemToPop = item;
 this._CommService.popItemSelected.emit(item);
 this.reduceCount.emit(this.itemToPop);
 this.list.pop(this.itemToPop);
 }
 ngOnInit() {
 console.log("list",this.list);

} The Emitting Component HTML:

<div style="border: 2px; background-color:darkgray; width:300px;" >
 <ul>
 <li *ngFor="let item of list" [class.selected]="item === selectedItem"
 (click)="onSelect(item)">
 {{item}}<button class="button" (click)="popItem(item)">X</button>
 </li>
 </ul>
</div>

App Module Code:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ChildCommService } from './components/child-comm.service';
import { AppComponent } from './app.component';
import { DetailsComponent } from './components/details/details.component';
import { PopListComponent } from './components/pop-list/pop-list.component';

@NgModule({
 declarations: [
 AppComponent,
 DetailsComponent,
 PopListComponent
 ],
 imports: [
 BrowserModule,
 FormsModule
 ],
 providers: [ChildCommService],
 bootstrap: [AppComponent]
})
export class AppModule { }

Please see to it that why the Component is not able to subscribe. Is there any conceptual error because compiler or console doesn't show any errors.

You shouldn't be using EventEmitter in your services: https://stackoverflow.com/questions/36076700/what-is-the-proper-use-of-an-eventemitter. Replace it with a Subject and when you do you will ask why the data is coming undefined and that's because you are providing it multiple times in your component and module which makes it a duplicate of https://stackoverflow.com/questions/43997489/angular-shared-service-between-components-doesnt-work. Please read the official documentation: https://angular.io/guide/component-interaction — eko, Aug 10 '17 at 10:56

score 1 · Answer 1 · answered Aug 11 '17 at 04:53

Just removed providers: [ChidCommService] from "pop-list.component.ts" file as I have provided it in the AppModule and now it works fine.

import { Component, OnInit } from '@angular/core';
import { ChildCommService } from '../child-comm.service';

@Component({
 selector: 'app-pop-list',
 templateUrl: './pop-list.component.html',
 styleUrls: ['./pop-list.component.css']
})

export class PopListComponent implements OnInit {
 recievedItem: any;
 constructor(private _childService: ChildCommService) { }
 ngOnInit() {

 this._childService.popItemSelected
 .subscribe(
 (itemToPop) => {
 this.recievedItem = itemToPop;
 }
 );
 }
}

score 0 · Answer 2 · answered Aug 10 '17 at 10:58

0

I had a similar issue. Somehow the emit was not working but it worked file when I used next. In your "details.component.ts", change the following line:

this.reduceCount.emit(this.itemToPop);

to

this.reduceCount.next(this.itemToPop);

answered Aug 10 '17 at 10:58

FAISAL

33,618
10
97
105

2

Consider using `Subject`/`BehaviourSubject`(depends on situation) inside service.. Rahter than going in other way with `EventEmitter` – Pankaj Parkar Aug 10 '17 at 11:10

Child Component not able to subscribe to the EventEmitter through the service

2 Answers2