title: BehaviorSubject: next is not a function
body: <p>I am trying share data between sibling components and do this via a shared service. When the first component loads, it retrieves a list of Servers from my API and fills a select-box with all the retrieved servers. Now I want to notify my other component when the user selected a new Server so I can display it's details. </p>
  
  <p>This is my service: </p>
  
  <pre><code>@Injectable()
  export class DashboardService {
      servers: Server[] = [];
      selectedServer = new BehaviorSubject&lt;Server&gt;(null);
  
      setServers(servers: Server[]) {
          this.servers = servers;
      }
  
  }
  </code></pre>
  
  <p>Component with the select-box:</p>
  
  <pre><code>@Component({
    selector: 'app-servers-select',
    template: `
      &lt;div class="form-group"&gt;
        &lt;label&gt;Server&lt;/label&gt;
        &lt;select class="form-control" [(ngModel)]="this.dashboardService.selectedServer" (ngModelChange)="change($event)"&gt;
          &lt;option disabled&gt;-- Select server --&lt;/option&gt;
          &lt;option *ngFor="let server of servers" [ngValue]="server"&gt;{{server.Name}}&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;`,
    styleUrls: ['./servers-select.component.css'],
    providers: [ServerService]
  })
  export class ServersSelectComponent implements OnInit {
    servers: Server[] = [];
  
    constructor(private serverService: ServerService, private dashboardService: DashboardService) { }
    ngOnInit() {
      this.serverService
        .getServers()
        .subscribe(s =&gt; {
          this.servers = s;
          this.dashboardService.setServers(s);
          console.log(s);
        },
        e =&gt; console.log(e));
  
    }
  
    // todo: pass to dashboard component
    public change = (event: any) =&gt; {
      console.log(event);
      this.dashboardService.selectedServer.next(event);
    }
  
  }
  </code></pre>
  
  <p>Detail component: </p>
  
  <pre><code>@Component({
    selector: 'app-server-details',
    template: `
    &lt;section&gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;Description&lt;/label&gt;
      &lt;input type="text" [(ngModel)]="server"&gt;
    &lt;/div&gt;
  &lt;/section&gt;
    `,
    styleUrls: ['./server-details.component.css']
  })
  export class ServerDetailsComponent implements OnInit {
  
    private server: Server = null;
  
    constructor(private dashboardService: DashboardService) { }
  
    ngOnInit() {
      this.dashboardService.selectedServer.subscribe((value: Server) =&gt; {
        console.log(value + 'lalalal');
        this.server = value;
      });
    }
  
  }
  </code></pre>
  
  <p>When I select a new Server, the change() method gets called correctly, but throws the following error in the console:</p>
  
  <blockquote>
    <p>ERROR TypeError: _this.dashboardService.selectedServer.next is not a function
        at ServersSelectComponent.change (servers-select.component.ts:39)</p>
  </blockquote>
  
  <p>The subscribe seems to work already since I get 'nulllalalal' in my console. What am I missing?</p>
  
  <p>EDIT: 
  - I am using angular 5 and rxjs 5.5.2
  - In my DashboardService, I import BehaviorSubject as follows:</p>
  
  <pre><code>import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  </code></pre>