title: ngx-loading Toggling from another component
body: <p>I'm using <a href="https://github.com/Zak-C/ngx-loading" rel="nofollow noreferrer">ngx-loading</a> and want to be able to trigger it's showing/hiding from children components. Here is what I currently have:</p>
  
  <p><strong>App.Component</strong></p>
  
  <pre><code>import { Component, Injectable } from '@angular/core';
  
  @Injectable()
  export class AppComponent implements OnInit{
    public loading = false;
  
    constructor() { }
  
    loader() {
      this.loading = !this.loading;
      console.log(this.loading);
    }
  }
  </code></pre>
  
  <p><strong>Child Component</strong></p>
  
  <pre><code>import { AppComponent} from '../app/app-component';
  import { MyService } from '../service/my-service';
  
  @Component({
    selector:'child-component',
    templateUrl: './child.component.html',
    providers: [AppComponent, MyService]
  })
  
  export class ChildComponent implments OnInit {
    constructor(private loader: AppComponent, private service: MyService) {}
  
    ngOnInit(): void {
      this.getData();
    }
  
  
    getData() {
      this.loader.loader();
      this.service.getDataFromService().then(res =&gt; {
        this.myModel = res;
        this.loader.loader();
      }
    }
  }
  </code></pre>
  
  <p>If I check my logs this.loader is toggle from true to false but the ngx-loading component isn't.  If I set the initial value of loading in app.component ngx-loading displays but wont hide. So I know that the loader is working.</p>
  
  <p>Any ideas?</p>