title: Angular 4 - service data is not persistent
body: <p>I am having some trouble figuring out where I went wrong and would really appreciate some help with this.</p>
  
  <p>I have a component: <code>AudioComponent</code>, which captures an html5  tag as a <code>@ViewChild</code>, then registers itself with a service: <code>AudioService</code>.</p>
  
  <p>Here is the <code>AudioComponent</code>:</p>
  
  <pre><code>/* audio.component.ts */
  import { Component, OnInit, Input, ViewChild } from '@angular/core';
  import { IAudioOptions } from './audio-options';
  
  export const defaultOptions: IAudioOptions = {
    controls: true,
    autoplay: false,
    loop: false,
    volume: 1.0,
    startPosition: 0.0,
    preload: "metadata",
    muted: false
  };
  
  @Component({
    selector: 'ng-audio',
    templateUrl: './audio.component.html',
    styleUrls: ['./audio.component.css']
  })
  export class AudioComponent implements OnInit {
    @Input() src: any;
    @Input() options: any = defaultOptions;
    @Input() register: any;
  
    @ViewChild('audio') player: any;
  
    constructor() { }
  
    ngOnInit() {
      if (this.register) {
        console.log("registering");
        console.log(this.register(this));
      }
    }
  
    play() {
      this.player.nativeElement.play();
    }
  
  }
  </code></pre>
  
  <p>And the <code>AudioService</code>:</p>
  
  <pre><code>/* audio.service.ts */
  import { Injectable } from '@angular/core';
  import { AudioComponent } from './audio/audio.component';
  
  @Injectable()
  export class AudioService {
    private players: AudioComponent[];
  
    constructor() { }
  
    register(player: AudioComponent) {
      console.log("player registered");
      if (this.players) {
        this.players.push(player);
      }
      else {
        console.log("initializing service");
        this.players = [];
        this.players.push(player);
      }
      return this.players;
    }
  
    getPlayers(): string[] {
      var out: string[];
      for (let i = 0; i &lt; this.players.length; i++) {
        out.push(this.players[i].src);
      }
      return out;
    }
  
  }
  </code></pre>
  
  <p>I'm instantiating two of the <code>ng-audio</code> components in my <code>app.component.html</code> file:</p>
  
  <pre><code>&lt;!-- register refers to the AudioService.register function --&gt;
  &lt;ng-audio [src]="src" [register]="register"&gt;&lt;/ng-audio&gt;
  &lt;ng-audio [src]="src2" [register]="register"&gt;&lt;/ng-audio&gt;
  </code></pre>
  
  <p>And the audio players themselves appear when I load the page.</p>
  
  <p>What's puzzling is that I get the following logged to the console:</p>
  
  <pre><code>- registering
  - player registered
  - initializing service
  - [AudioComponent]
  - registering
  - player registered
  - initializing service // &lt;- this should only happen the first time!
  - [AudioComponent]     // &lt;- and this should now contain two elements!
  </code></pre>
  
  <p>For some reason, the <code>players: AudioComponent[]</code> property of the <code>AudioService</code> does not persist. So each time <code>register()</code> is called, it's like I'm calling it on a completely new <code>AudioService</code> instance!</p>
  
  <p>Again, any help will be greatly appreciated. I'll be posting updates if I can figure this out.</p>
  
  <p>EDIT: I've included my <code>app.module.ts</code> and <code>app.component.ts</code> files in case there's something I missed setting up the service as a provider.</p>
  
  <p><code>AppModule</code>:</p>
  
  <pre><code>/* app.module.ts */
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  import { AudioComponent } from './audio/audio.component';
  import { AudioService } from './audio.service';
  
  @NgModule({
    declarations: [
      AppComponent,
      AudioComponent
    ],
    imports: [
      BrowserModule
    ],
    exports: [AudioComponent],
    providers: [AudioService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>And <code>AppComponent</code>:</p>
  
  <pre><code>/* app.component.ts */
  import { Component } from '@angular/core';
  import { AudioComponent } from './audio/audio.component';
  
  import { AudioService } from './audio.service';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'app';
    src = 'http://url.to/file.mp3';
    src2 = 'http://url.to/another-file.mp3';
    interval: any;
    player: AudioComponent;
  
    register: any;
    play: any;
  
    constructor(
      private service: AudioService
    ) {
      this.register = this.service.register;
      this.play = this.service.getPlayers;
    }
  }
  </code></pre>