app.component.html

<div class="container">
  <br />
  <h1 class="text-center">{{title}}</h1>
  <button (click)='rfreshdata()'>Refresh Data</button>
  <table class="table">
    <thead>
      <th>Id</th>
      <th>Title</th>
      <th>Price</th>
      <th>Stock</th>
    </thead>
    <tbody>
      <tr *ngFor="let p of products">
        <td>{{p.id}}</td>
        <td>{{p.title}}</td>
        <td>{{p.price}}</td>
        <td>{{p.stock}}</td>
        <td><app-stockupdate (stockValueChange)='changeStockValue($event)' [stock]='p.stock' [productId]='p.id'></app-stockupdate></td>
      </tr>
    </tbody>
  </table>
</div>

ComponentCommunicationAppcomponent.js

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  products = [];
  title = " Products App";
  productToUpdate :any; 
  constructor() {}

  ngOnInit(){
    this.products = this.getData();
  }
  rfreshdata(){
    this.products[2].stock = -30;
  }
  changeStockValue(data){
    this.productToUpdate = this.products.find(this.findProducts, [data.id]);
     console.log(this.productToUpdate);
    this.productToUpdate.stock = this.productToUpdate.stock - data.updatedvalue;
  }
  findProducts(p) { 

    return p.id === this[0]; 

  } 
  getData() {
    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 },
    ];
  }
}

stockupdate.component.js

import { Component, OnInit, Input, OnChanges, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-stockupdate',
  templateUrl: './stockupdate.component.html',
  styleUrls: ['./stockupdate.component.css']
})
export class StockupdateComponent implements OnInit, OnChanges {
  @Input() stock: number;
  @Input() productId: number;
  @Output() stockValueChange = new EventEmitter();
  updatedvalue : number; 
  color = '';

  constructor() { }

  ngOnChanges() {
    if (this.stock > 10) {
      this.color = 'green';
    } else {
      this.color = 'red';
    }
  }

  stockValueChanged() {
   this.stockValueChange.emit({
     id: this.productId,
     updatedvalue: this.updatedvalue
   })
  } 
  ngOnInit() {
  }

}

stockupdate.componnet.html

<input [(ngModel)]='updatedvalue' type="number" placeholder="Updated Stock Value"/>
<button [style.background]='color'
 (click)='stockValueChanged()'>
    Update Stock
</button>