title: Angular 5 service data not updating
body: <p>I am slowing migrating from AngularJS to Angular(2+) and just stumbled across something.</p>
  
  <p>In AngularJS, I used a lot of factories and services for sharing data across directives, controllers and other services. It is easy to update the service in one place and have it update everywhere else automatically.</p>
  
  <p>However, I am trying to use a service in a similar manner in Angular 5 and "nothing is happening" when I change the service variables.</p>
  
  <p>I've seen some solutions that involve creating functions that "pull" the new data or suggestions to update the "Angular change service" to bind events to the variable.</p>
  
  <p>However, my app has many variables used in many locations. It doesn't seem correct that I have to subscribe to every single variable separately, within every single component that uses them, and change the service to emit a change for every single one.</p>
  
  <p>Am I just missing something?</p>
  
  <p>Thanks!!!
  Wayne</p>
  
  <p>For Example:</p>
  
  <p><strong>A component for a home page.</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { HomeButtonDirective } from '../home-button.directive';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
  })
  export class HomeComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p><strong>The directive for a button that is reused on the home page:</strong></p>
  
  <pre><code>import { Directive, Input, OnInit, HostListener } from '@angular/core';
  import { InfoService } from './info.service';
  
  @Directive({
    selector: '[appHomeButton]',
    providers: [InfoService]
  })
  export class HomeButtonDirective {
    @HostListener('click', ['$event']) onclick($event) {
      this.info.showHome = false;
    }
    constructor(private info: InfoService) { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p><strong>The app component. Will show the home page if showHome===true:</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { InfoService } from './info.service';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    providers: [InfoService]
  })
  export class AppComponent {
    title = 'Testing a service';
    showHome = true;
  
    constructor(private info: InfoService) {
      this.showHome = this.info.showHome; // this works...showHome becomes false per the service (see below)
    }
  
   }
  </code></pre>
  
  <p><strong>And finally, the service:</strong></p>
  
  <pre><code>import { getTestBed } from '@angular/core/testing';
  import { Injectable } from '@angular/core';
  
  @Injectable()
  
  export class InfoService {
      showHome = false;
   }
  </code></pre>