title: Cannot read property 'stock' of undefined
body: <p>I am making an Angular app where I want to update the value of stock-based on the input that the user enters.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// app.component.ts
  
  export class AppComponent implements OnInit{
      title = 'Products';
      products = [];
      productToUpdate;
  
      ngOnInit() {
        this.products = this.getProducts();
      }
  
      getProducts() {
        return [
          { 'id' : '1', 'title' : 'Screw Driver', 'price': 400, 'stock' : 11},
          { 'id' : '2', 'title' : 'Nut Volt', 'price': 200, 'stock' : 5},
          { 'id' : '3', 'title' : 'Resistor', 'price': 78, 'stock' : 45},
          { 'id' : '4', 'title' : 'Tractor', 'price': 20000, 'stock' : 1},
          { 'id' : '5', 'title' : 'Roller', 'price': 62, 'stock' : 15},
        ]
      }
  
      changeStockValue(p) {
        console.log(p)
        this.productToUpdate = this.products.find(this.findProducts, [p.id])
        console.log(this.productToUpdate)
        this.productToUpdate['stock'] = this.productToUpdate['stock'] + p.updatedstockvalue;
  
        console.log(this.productToUpdate)
      }
  
      findProducts(p) {
        return p.id == this[0]
      }
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- app.component.html --&gt;
  
  &lt;div class="container"&gt;
      &lt;br&gt;
      &lt;h1 class="text-center"&gt;{{title}}&lt;/h1&gt;
      &lt;table class="table"&gt;
          &lt;thead&gt;
              &lt;th&gt;Id&lt;/th&gt;
              &lt;th&gt;Title&lt;/th&gt;
              &lt;th&gt;Price&lt;/th&gt;
              &lt;th&gt;Stock&lt;/th&gt;
          &lt;/thead&gt;
  
          &lt;tbody&gt;
              &lt;tr *ngFor="let p of products"&gt;
                  &lt;td&gt;{{p.id}}&lt;/td&gt;
                  &lt;td&gt;{{p.title}}&lt;/td&gt;
                  &lt;td&gt;{{p.price}}&lt;/td&gt;
                  &lt;td&gt;{{p.stock}}&lt;/td&gt;
                  &lt;td&gt;&lt;app-stock-status [productId]='p.id' [stock]='p.stock' (stockValueChange)='changeStockValue($event)'&gt;&lt;/app-stock-status&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// stock-status.component.ts
  
  export class StockStatusComponent implements OnChanges {
    
      @Input() stock; number;
      @Input() productId: number;
      @Output() stockValueChange = new EventEmitter();
      color = '';
      updatedstockvalue: number;
  
      constructor() { }
  
      ngOnInit() {
      }
  
      stockValueChanged() {
        this.stockValueChange.emit(JSON.stringify({
        id: this.productId,
        updatedstockvalue: this.updatedstockvalue
      }))
  
        this.updatedstockvalue = null;
      }
  
      ngOnChanges() {
  
        if(this.stock &gt; 10) {
          this.color = 'green';
        } else {
          this.color = 'red';
        }
      }
  
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- stock-status.component.html --&gt;
  
  &lt;input type='number' [(ngModel)] = "updatedstockvalue" /&gt;
      &lt;button class="btn btn-primary" [style.background]='color' (click)="stockValueChanged()"&gt;Chnage Stock 
      Value&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>What I am trying to do here is first display the product detail in app-root and then update the value of the stock of product by the value that thee user enters.</p>
  <p>I have a Parent Child relation as follows:</p>
  <p>app-stock-status -&gt; app-root (Child to Parent Relation) as  passes the stockValueChange Object to app-root</p>
  <p>app-root -&gt; app-stock-status (parent to Child Relation) as app-root passes 'stock' &amp; 'productId' to  app.stock-status</p>
  <p>and I have a 'Change stock value' button in  which when clicked should change the value of the stock field of the appropriate product selected. But what happens is that when I click the 'Change stock value' button it gives me an error on line 32 of app.component.ts and I am not able to update the value of the stock.</p>
  <blockquote>
  <p>AppComponent.html:18 ERROR TypeError: Cannot read property 'stock' of
  undefined
  at AppComponent.changeStockValue (app.component.ts:31)
  at Object.eval [as handleEvent] (AppComponent.html:18)
  at handleEvent (core.js:43993)
  at callWithDebugContext (core.js:45632)
  at Object.debugHandleEvent [as handleEvent] (core.js:45247)
  at dispatchEvent (core.js:29804)
  at core.js:31837
  at SafeSubscriber.schedulerFn [as _next] (core.js:35379)
  at SafeSubscriber.__tryOrUnsub (Subscriber.js:185)
  at SafeSubscriber.next (Subscriber.js:124)</p>
  </blockquote>
  <p>Can somebody suggest what's wrong here?</p>