title: Angular 8 - Behavior Subject not emitting next value in Service
body: <p>Hi I have an angular application where I'm passing data from one component to a service and trying to update the value of a behavior subject in that service by calling it's next function so it in turn updates a subscribe value in another component. My issue is when passing the data and creating an object to pass to the behavior subject the next function doesn't execute. Here is the code.</p>
  
  <p>My ShopService.ts</p>
  
  <p>I've left out other functions in the code for sake of space but they should have no bearing on the code i'm trying to implement</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  import { AuthService } from 'src/app/auth/auth.service';
  import { Product } from '../models/product.model';
  
  import { BehaviorSubject } from 'rxjs';
  import { take, exhaustMap, tap } from 'rxjs/operators';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ShopService {
  
    productsSubject = new BehaviorSubject&lt;Product[]&gt;(null);
  
    productSubject = new BehaviorSubject&lt;Product&gt;(null);
  
    productObs = this.productSubject.asObservable();
  
    private products: Product[];
  
    private product: Product;
  
    private userToken;
  
    constructor(private http: HttpClient, private authService: AuthService) {
  
    }
  
   // trying to update the behavior subject here but next never executes but data is logged to console
   editProductForm(id: string, title: string, price: number, imagePath: string, description: string) {
       this.product = new Product(title, price, imagePath, description, id);
       console.log('edit product ' + this.product.title);
       this.productSubject.next(this.product);
    }
  }
  
  </code></pre>
  
  <p>admin-shop.component.ts</p>
  
  <p>This is where i'm trying to subscribe to the behavior subjects value once it's updated</p>
  
  <pre><code>import { Component, OnInit, Output, EventEmitter } from '@angular/core';
  import { NgForm } from '@angular/forms';
  
  import { ShopService } from '../services/shop.service';
  
  import { Subscription } from 'rxjs';
  
  import { Product } from '../models/product.model';
  
  @Component({
    selector: 'app-admin-shop',
    templateUrl: './admin-shop.component.html',
    styleUrls: ['./admin-shop.component.css']
  })
  export class AdminShopComponent implements OnInit {
  
    @Output() editProductEvent = new EventEmitter&lt;boolean&gt;();
  
    productSub: Subscription;
  
    product: Product;
  
    error: string;
  
    isLoading = false;
  
    isEditing = false;
  
    constructor(private shopService: ShopService) { }
  
    ngOnInit() {
      this.productSub = this.shopService.productSubject.subscribe(product =&gt; {
        if (product) {
          console.log('editing product' + product);
          this.editProductEvent.emit(true);
          this.product = new Product(
            product.title,
            product.price,
            product.imagePath,
            product.description,
            product._id);
        }
      });
    }
  }
  
  </code></pre>
  
  <p>item-list.component.ts</p>
  
  <p>This is where i'm sending the data to the service and I know it's being sent as it's being logged in the console once it reaches the service.</p>
  
  <pre><code>import { Component, OnInit, OnDestroy } from '@angular/core';
  import { Product } from '../models/product.model';
  import { ShopService } from '../services/shop.service';
  import { Subscription } from 'rxjs';
  
  @Component({
    selector: 'app-item-list',
    templateUrl: './item-list.component.html',
    styleUrls: ['./item-list.component.css']
  })
  export class ItemListComponent implements OnInit, OnDestroy {
  
    products: Product[] = [];
  
    private shopSub: Subscription;
  
    private subjectSub: Subscription;
  
    constructor(private shopService: ShopService) { }
  
    editProduct(id: string, title: string, price: number, imagePath: string, description: string) {
      this.shopService.editProductForm(id, title, price, imagePath, description);
    }
  }
  </code></pre>
  
  <p>The code I've supplied is where the issue lies because I've already behavior subjects in other parts of my application that work as intended it's just when I send the data from the item-list component to the service it logs the data but doesn't update the behavior subject and it never reaches the subscription as no data is then logged in the admin-shop components subscription code.</p>
  
  <p>Hopefully I've supplied enough to find the answer but if not please ask for anything more you may deem necessary. Thanks in advance :)</p>
  
  <p>Here's the app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppRoutingModule } from './app-routing.module';
  import { FormsModule } from '@angular/forms';
  
  import { AppComponent } from './app.component';
  import { HeaderComponent } from './header/header.component';
  import { HomeComponent } from './home/home.component';
  import { AuthComponent } from './auth/auth.component';
  import { DropDownDirective } from './util/dropdown.directive';
  import { HttpClientModule } from '@angular/common/http';
  import { LoadingSpinner } from './util/loading-spinner/loading-spinner.component';
  import { AdminComponent } from './admin/admin.component';
  import { DashboardComponent } from './admin/dashboard/dashboard.component';
  import { AdminShopComponent } from './admin/dashboard/admin-shop/admin-shop.component';
  import { AdminProfileComponent } from './admin/dashboard/admin-profile/admin-profile.component';
  import { ItemListComponent } from './admin/dashboard/item-list/item-list.component';
  import { BlockchainComponent } from './blockchain/blockchain.component';
  
  
  @NgModule({
    declarations: [
      AppComponent,
      HeaderComponent,
      HomeComponent,
      AuthComponent,
      DropDownDirective,
      LoadingSpinner,
      AdminComponent,
      DashboardComponent,
      AdminShopComponent,
      AdminProfileComponent,
      ItemListComponent,
      BlockchainComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      FormsModule,
      HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  
  </code></pre>