Angular2 mdl-dialog-service- loaded component do not subscribe to emitted event

Question

I have a central service registered at app level whose task is to keep and send latest state of a model across all components:

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';

import { Feature } from '../models/Feature.model'


@Injectable()
export class CentralService {

  private feature = new Subject<Feature>();

  feature$= this.feature.asObservable();

  emitToFeature(feature: Feature) {
    this.feature.next(feature);
  }

}

From one of my components I am emitting a feature and also showing a mdl-dialog (from angular2-mdl):

import { Component, OnInit } from '@angular/core';
import { FeatureComponent } from '../feature/feature.component'
import { MdlDialogService } from 'angular2-mdl';
import { CentralService } from '../services/central.service';

@Component({
    ...
    providers:[TaskListService]
})
export class TaskListComponent implements OnInit {

   feature: any=[];
   constructor(
     public dialogService: MdlDialogService,
     private centralService: CentralService){
   }

   addToFeature(value, task){

     if(value==true){
       this.feature.push(task)
       this.centralService.emitToFeature(this.feature)
     }
     else{
       let index: number = this.feature.indexOf(task)
       if (index !== -1) {
         this.feature.splice(index, 1);
         this.centralService.emitToFeature(this.feature)
       } 
     }
   }

   openDialog(){

     this.dialogService.showCustomDialog({
      component: FeatureComponent,
      animate: true,
      isModal: true,
      styles: {'width': '800px', 'max-height':'500px' ,'overflow-y':'scroll'},
      clickOutsideToClose: true

    })

   }
}

The dialog basically shows FeatureComponent which is:

import { Component, OnInit, AfterContentInit } from '@angular/core';
import { CentralService } from '../services/central.service';

@Component({
    ...
})
export class FeatureComponent implements OnInit, AfterContentInit {

    constructor(
        private centralService: CentralService
        ) { 
    }

    ngOnInit() {
    }

    ngAfterContentInit(){

        this.centralService.feature$.subscribe(

            feature => {
                console.log('In Feature component ', feature)
            }
            )

    }

}

The dialog loads correctly and shows FeatureComponent's template but somehow it do not fetch feature from central service. I tried writing it in ngOnInit() and also in constructor, but did't help.

The dialog outlet is in app.html:

<app-header></app-header>
<dialog-outlet></dialog-outlet>
<router-outlet></router-outlet>

Note: there is no console statement as written in ngAfterContentInit(). What am I doing wrong?

Not really looking too closely at your code. But it seems you are providing this service at module level right? So it's a singleton, which is correct. Is it so that both components are not both in view when you emit? If that is the case, a regular `Subject` won't work, because it's just subscribing when there is an emit. You need to use `BehaviorSubject` or `ReplaySubject` which subscribes always. Difference: https://stackoverflow.com/a/40231605 — AT82, May 25 '17 at 08:19

Angular2 mdl-dialog-service- loaded component do not subscribe to emitted event

0 Answers0