Angular 2 subscribe not executing

Question

Plunkr: https://plnkr.co/edit/arROwxsFYraSBeAZCIYF?p=preview

I'm trying to subscribe to an observer but I can't get it to work. The subscribe method is never activated for some reason, the notifyAboutChange runs and the correct id is passed but after calling next the subscribe method doesn't seem to pick up on it being called.

The service which contains the observer:

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

@Injectable()

export class ApiService {
  public notifier = new Subject();
  public changeOccurrence$ = this.notifier.asObservable();

  constructor() {}

  notifyAboutChange(id: string) {
    this.notifier.next(id);
  }
}

Directive which calls the notifyAboutChange method:

constructor(private _elementRef: ElementRef, private _renderer: Renderer, private _api: ApiService) {

  this.eventHandler = _renderer.listen(_elementRef.nativeElement, ('ontouchstart' in window ? 'touchend' : 'click'), (e) => {

    this.isAllChecked = !this.isAllChecked;

    for (let checkbox of this.checkboxes) {

      if (!checkbox.isDisabled) {
        checkbox.isChecked = this.isAllChecked;
      }
    }

    _api.notifyAboutChange(this.componentId);
  });
}

Component which should subscribe:

export class FormCheckboxMultipleComponent implements OnInit, DoCheck {
  @Input() model: Array<any>;
  @Input() checkboxes: Array<any>;
  @Output('modelChange') onModelChange: EventEmitter<any> = new EventEmitter();
  @Output() callback: EventEmitter<any> = new EventEmitter();

  constructor(private _globals: GlobalVariablesService, private _differs: IterableDiffers, private _api: ApiService) {
    this.ns = _globals.ns;
    this.differ = _differs.find([]).create(null);

    _api.changeOccurrence$.subscribe(
      componentId => {
        console.log(componentId);
        if (this.componentId === componentId) {

          for (let checkbox of this.checkboxes) {

            let existingIndex = this.findIndex(checkbox, this.model);

            if (existingIndex === -1) {
              this.model.push(checkbox);
            }
            else {
              this.model.splice(existingIndex, 1);
            }
          }
        }
      }
    )
  }

  .... excluded parts ....
}

Thierry Templier · Accepted Answer · 2016-06-11 12:13:26Z

2

I think that it could be because you don't share the same instance of the service. You could define the corresponding provider when bootstrapping your application:

bootstrap(AppComponent, [ ApiService ]);

Don't forget to remove the service from the providers attribute of components / directives.

Note that you can restrict the scope of the service if necessary. For example by defining it in a component that contains / uses both component and directive.

See this plunkr: https://plnkr.co/edit/lGgNq5HpqFZCQfGl0Tpw?p=preview.

edited Jun 11, 2016 at 12:13

answered Jun 11, 2016 at 11:56

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chrillewoodz Over a year ago

Hm no that's not it :/

Thierry Templier Over a year ago

You also need to remove the service from providers attribute of components / directives...

Chrillewoodz Over a year ago

Ah my bad, had forgotten to remove it from the directive. OK it kinda makes sense now..

Collectives™ on Stack Overflow

Angular 2 subscribe not executing

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related