title: How to update property binding on view after OnInit? (Angular)
body: <p>I am using BehaviorSubject within a service to broadcast selected objects to other components. Everything with the service works including updating the selected object.</p>
  
  <p>My problem is when I run the service within the component I am trying to get the object to, ngOnInit updates the properties on the variable, but it is not updated on my view.</p>
  
  <p>I have tried to use onChanges lifecycle hook, but apparently that doesn't work with objects.</p>
  
  <p>Please tell me what I am doing wrong. I know I am missing a few lines of code and that's all.</p>
  
  <p>Here is my Parent Component TypeScript file.</p>
  
  <pre><code>  open(content, product: Product) {
      this.modalService2.open(content, { windowClass: 'dark-modal' });
      this.addToCartService.changeProduct(product);
    }
  </code></pre>
  
  <p>Whenever I click "Add to cart" on my view, it triggers the "Open()" method which sends the selected product to the service which is this..</p>
  
  <p>Add To Cart Service Code:</p>
  
  <pre><code>@Injectable()
  export class AddToCartService {
  
      product: Product;
  
      private productSource = new BehaviorSubject&lt;Product&gt;(this.product);
      currentProduct = this.productSource.asObservable();
  
      constructor() { }
  
      changeProduct(product: Product){
          this.productSource.next(product);
      }
  }
  </code></pre>
  
  <p>Finally the product is updated within the service and it is accessed by the next component which is supposed to display a modal with properties from the updated product..</p>
  
  <p>Add To Cart (Child) Component Typescript file:</p>
  
  <pre><code>ngOnInit() {
     this.updateBeer();
  
    }
  
  
  
    updateBeer()
    {
      console.log(this.beerselected);//initially "beerselected" is undefined
      this.addToCartService.currentProduct.subscribe( beer =&gt; this.beerselected = beer);
      console.log("from add to cart", this.beerselected);//"beerselected is updated with the object, but the property bindings in the view are still null"
    }
  </code></pre>
  
  <p>initially it is undefined, then the service is called, and the variable beerselected gets its properties updated, but the view is binding to beerselected, however it is still showing undefined.</p>
  
  <pre><code>Product Model class:
  
     export class Product
  {
      id: string="beer 1";
      beerName: string="beer 2";
      alcoholPercent: number=5;
      beerType: string="pilser";
      beerPrice: number=10;
      beerAmount: number=120;
      servingSize: number=8;
      beerPicture: string="../assets/";
  }
  </code></pre>
  
  <p>Also in case it helps, here is the HTML for Add to cart,</p>
  
  <pre><code>   &lt;div class="col-8"&gt;
                &lt;h5 class="m-b-0"&gt;Beer Name: {{beerselected?.beername}}&lt;/h5&gt;
                &lt;ngb-rating [(rate)]="selected" (hover)="hovered=$event" (leave)="hovered=0" [readonly]="readonly"&gt;&lt;/ngb-rating&gt;&lt;br&gt;
                &lt;span&gt;&lt;b&gt;Type: &lt;/b&gt;&lt;/span&gt;
                &lt;span class="text-muted"&gt;{{beerselected?.beername}}&lt;/span&gt; &lt;br&gt;
                &lt;span&gt;&lt;b&gt;Alcohol %: &lt;/b&gt;&lt;/span&gt;
                &lt;span class="text-muted"&gt;{{beerselected?.beername}}&lt;/span&gt; &lt;br&gt;
                &lt;span&gt;&lt;b&gt;Description: &lt;/b&gt;&lt;/span&gt;
                &lt;span class="text-muted"&gt;&lt;/span&gt; &lt;br&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/CnMWG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CnMWG.png" alt="enter image description here"></a></p>