Проблема с разделением количества для каждого продукта Angular4

Я разрабатываю приложение для покупок с элементами списка и корзиной Я сделал переменную под названием приращение, которая считает 1 каждый щелчок по кнопке добавления.

Первая проблема заключается в том, что я просматриваю массив из API, и мне нужно, чтобы каждый элемент имел собственную переменную приращения, чтобы подсчитать все в элементе корзины. Потому что, когда я нажимаю на значок плюса, учитывается каждый элемент, мне нужно их разделить

Вторая проблема, как показать общее количество элементов внутри дочернего компонента? Потому что я попытался показать его со статическим значением в дочернем компоненте через локальную переменную, и он не привязался.

Мой HTML-код родителя:

<div class = "container">
<div class = "row">
<div class = "col-md-12 col-sm-12 col-xs-12 text-center">
  <div class = "col-md-12 col-sm-12 col-xs-12">
    <app-cart #total>
     total items are:   {{total}}       
    </app-cart>
  </div>
  <ul *ngIf = "items">
    <li class = "padding-add" *ngFor = "let item of items; let i of index">
      <div class = " col-md-12">
        <div class = "col-md-4 col-sm-4 col-xs-12 padding-add">
          <img src = "{{item.imageUrl}}" width = "200">
        </div>
        <div class = "col-md-6 col-sm-6 col-xs-12 padding-add">
          <h4>{{item.id}}- {{item.name}}</h4>
          <h6>Material: {{item.service1}}</h6>
          <h6>Options: {{item.service2}}</h6>
          <h6>Price: {{item.service3}} $</h6>
        </div>
        <div class = "col-md-2 col-sm-2 col-xs-12">
          <button (click) = "addToCart()" class = "btn-6 fa fa-plus"></button>
          <span>{{increment}}</span>
    <button (click) = "removeFromCart()" class = "fa fa-minus btn-6"></button>
  </div>
      </div>
    </li>
  </ul>
</div>
</div>
</div>

Родительский TS:

export class ListComponent implements OnInit {
constructor(
private getItemsService: JustCleanServiceService,
private spinner: NgxSpinnerService
) { }
items:any = {};
increment: number = 0;
total: number = 8;  
ngOnInit() {
this.getItems();
}
getItems() {
this.spinner.show() 
this.getItemsService.getItems().subscribe(
  res => {
    console.info(res)
    if (res) {
      this.items = res;
      this.spinner.hide();          
    }
  }
)
}
addToCart() {
this.increment++;
this.increment + this.total;
console.info(this.increment);
}
removeFromCart() {
this.increment--;
if (this.increment == -1) {
  this.increment++;
}
}
}

Дочерний TS:

export class CartComponent implements OnInit {
total: number;
constructor() { }
ngOnInit() {
}
}

Дочерний HTML:

<p>total items are:    {{total}}</p>

Пожалуйста, помогите мне с обоими проблемами, с которыми я столкнулся

Ссылка на API: http://5a12745f748faa001280a746.mockapi.io/v1/stores/item