Angular2 with Rx.subject not refreshing the view

Question

Probably I'm missing some Angular2 concept about Change Detection.

I've read about NgZones and ChangeDetectionStrategy but none seemed to solve my problem.

The case is I have a external module where I store my Observables and consume them in some components, when one of the components changes something into the service, it propagates to the other components.

I wrote a Plunker to help to express my problem

http://plnkr.co/edit/ieHnm0ikBe4BR5w6O1XE?p=preview

In there, I have the src/MyService.ts where I simulate an Subject with constant data change using a setInterval.

The Subject is consumed in the src/app.ts and its value only get rendered when you click a button with a empty click handler.

src/MyService.ts

import * as Rx from 'rxjs/Rx';

let global = {};

// The Observable
global.subject = new Rx.Subject();

// Updates value every second
setInterval(() => global.subject.next(Date.now()), 1000);

export var Global = global;

src/app.ts

import {Component} from 'angular2/core'
import {Global} from './myService'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="clickMe()">Click me</button>
      <p>Current time: {{subject | async}}</p>
    </div>
  `,
  directives: []
})
export class App {
  public subject = Global.subject;
  constructor() {
    this.name = 'Angular2'
  }

  public clickMe () {
    console.log("I'm just a click event that do nothing");
  }
}

Why is your service like that? All what's happening there is out of angular2 zone — Eric Martinez, Mar 14 '16 at 01:25

score 0 · Answer 1 · edited May 23 '17 at 12:17

I do not know if this is what you are looking for.

`Plunker`

import {Component, ChangeDetectorRef} from 'angular2/core'
import {Global} from './myService'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="clickMe()">Click me</button>
      <p>Current time: {{subject | async}}</p>
    </div>
  `,
  directives: []
})

export class App {

  public subject = Global.subject;

  constructor(public ref: ChangeDetectorRef) {
    this.name = 'Angular2';

    setInterval(() => {
                this.ref.detectChanges();
              }, 1000);
  }

  public clickMe () {
    console.log("I'm just a click event that do nothing");
  }
}

You may also want to look at this.

import {Component} from 'angular2/core'
import {GlobalSR} from './myService'

@Component({
  selector: 'my-app',
  providers: [GlobalSR],
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="clickMe()">Click me</button>
      <p>Current time: {{subject | async}}</p>
    </div>
  `,
  directives: []
})

export class App {

  public subject;

  constructor(public globalSR: GlobalSR) {
    this.name = 'Angular2';
    this.subject = globalSR.global.subject;

  }

  public clickMe () {
    console.log("I'm just a click event that do nothing");
  }
}

`Plunker`

maybe this help you if you like global share angular2-global-service-provider

I do not know what you want to do. I hope it will help you and sorry for my English

Angular2 with Rx.subject not refreshing the view

1 Answers1

Plunker

Plunker

`Plunker`

`Plunker`