Trigger update of component view from service - No Provider for ChangeDetectorRef

ChangeDetectorRef is not option to use here. It is looking for changes in a given component and its children.

In your case It would be better to use ApplicationRef:

import {Injectable, ApplicationRef } from '@angular/core';@Injectable()export class MyService {  private count: number = 0;  constructor(private ref: ApplicationRef) {}  increment() {    this.count++;    this.ref.tick();  }}

I checked this solution with Observables and it works without any problems:

import { ApplicationRef, Injectable } from '@angular/core';import { Observable, ReplaySubject } from "rxjs/Rx";import * as childProcess from 'child_process';@Injectable()export class Reader {    private output: ReplaySubject<string> = new ReplaySubject<string>(0);    constructor(private ref: ApplicationRef) {        var readerProcess = childProcess.spawn('some-process');        readerProcess.stdout.on('data', (data) => {            this.output.next(data.toString());            this.ref.tick();        });    }    public getOutput():Observable<string> {        return this.output;    }}

and here is a component which uses it:

import {Component} from '@angular/core';import { ReplaySubject, Observable } from "rxjs/Rx";import { Reader } from './reader/reader.service';@Component({    selector: 'app',    template: `    output:    <div>{{output}}</div>    `})export class App {    public output: string;    constructor(private reader: Reader) {}    ngOnInit () {        this.reader.getOutput().subscribe((val : string) => {            this.output = val;        });    }}

Another option if you want to trigger the change from the service but allow the components to control if, when, and how they respond is to set up subscriptions.

In your service, add an EventEmitter:

changeDetectionEmitter: EventEmitter<void> = new EventEmitter<void>();

When something happens in the service that might need to trigger a change detection cycle, simply emit:

this.changeDetectionEmitter.emit();

Now, in any components that use this service, if they need to listen for possible change triggers, they can subscribe and react appropriately:

this.myService.changeDetectionEmitter.subscribe(    () => {      this.cdRef.detectChanges();    },    (err) => {      // handle errors...    }  );

I kinda like this approach because it leaves control of change detection with the components where it belongs, but allows me to centralize logic in the service. The service doesn't need to know anything about the UI, it's just notifying anyone who is listening that something changed.

I know im long overdue for this but I tried simply to pass the ChangeDetectorRef to the Service via the function being called.

//myserviceimport { Injectable, ChangeDetectorRef } from '@angular/core';@Injectable()export class MyService {  constructor(){}  increment(ref: ChangeDetectorRef, output: number) {    output++;    ref.detectChanges();}

The Component

import {Component} from '@angular/core';import { MyService } from './myservice.service';@Component({    selector: 'app',    template: `    output:    <div>{{output}}</div>    `})export class App {    public output: number;    constructor(public ref: ChangeDetectorRef, private myService: MyService) {}    ngOnInit () {       this.myService.increment(this.ref,output)    }}