title: Toggling classes using Angular 2 Services
body: <p>I am trying to create an example where classes can be added/removed using angular 2 services. Here is a plunkr: <a href="https://plnkr.co/edit/qLzgTca6Ul4W6OpBXG7w?p=preview" rel="nofollow">https://plnkr.co/edit/qLzgTca6Ul4W6OpBXG7w?p=preview</a></p>
  
  <p>What I am basically doing is on the click of a button, I am trying to toggle a class across different selectors spread across the application using a service:</p>
  
  <pre><code>import {Injectable} from "angular2/core";
  
  @Injectable()
  export class AppService{
      background: boolean = false; //Scrolling is on by default
  }
  </code></pre>
  
  <p>The background flag decides if the background should change or not:</p>
  
  <p>ComponentA:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {AppService} from './app.service';
  
  @Component({
      selector: "comp-a",
      template: `
        &lt;div&gt;
          Component A!
          &lt;button (click)="onClick()"&gt;Click me&lt;/button&gt;
        &lt;/div&gt;
      `
  })
  export class ComponentA{
  
    constructor(private _appService: AppService){
  
    }
  
    onClick(){
      this._appService.background = true;
      console.log(this._appService.background);
    }
  }
  </code></pre>
  
  <p>Directive C:</p>
  
  <pre><code>import {Directive} from 'angular2/core';
  import {AppService} from './app.service';
  
  @Directive({
      selector: "my-app",
      host: {'[class.backgroundBlue]':'_appService.background'}
  })
  export class DirectiveC{
  
    constructor(private _appService: AppService){
  
    }
  }
  </code></pre>
  
  <p>App:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  
  import {ComponentA} from './a.component';
  import {ComponentB} from './b.component';
  import {DirectiveC} from './c.directive';
  
  @Component({
      selector: "my-app",
      template: `
        &lt;div&gt;
          App Component!
          &lt;comp-a&gt;&lt;/comp-a&gt;
          &lt;comp-b&gt;&lt;/comp-b&gt;
        &lt;/div&gt;
      `,
      directives: [ComponentA,ComponentB,DirectiveC]
  })
  export class AppComponent{
  }
  </code></pre>
  
  <p>When I click on the button in ComponentA the color of the ComponentB changes but why doesn't it affect the selector for DirectiveC?</p>