Angular4 - the quantity of a new product (quantity) is not added with the previous account

Question

I work on an e-commerce website. In this, I have a certain amount of products in my basket, when I add more products, a new quantity is not added with the previous account. In my case, it always replaces the value of the old basket with the new value of the basket.

This is my service component.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class CartdataService {

  private Count = new BehaviorSubject<number>(0);
  cast = this.Count.asObservable();

  constructor() { }

  editCount(newCount){
  this.Count.next(newCount);
  }

}

This is my component of the application (here I display the total basket value at the top of the page)

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DatePipe } from '@angular/common';
import { HostListener } from '@angular/core';
import {CartdataService} from './cartdata.service';


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit{
 nCount : number;
  constructor(private CartdataService:CartdataService,private http: HttpClient) { }
 ngOnInit() {
        this.CartdataService.cast.subscribe(totalItems=> this.nCount = totalItems);
}
}

HTML Application Component

<span class='notification-counter badge badge-danger' [class.disabled]="nCount == 0" data-toggle="modal" data-target="#exampleModal">{{nCount}}</span>

This is my Add to Cart HTML screen (Add product quantity of selected product here)

<div class="col-sm-9">
              <div class="row">
                <div class="col-sm-3">
                    <input type="text" readonly  class="form-control col-8 text-center bg-white font-weight-bold " id="counterval" value="{{counter}}" #Totalcartval>
                </div>         
                    <a class="btn btn-primary text-white" (click)="decrement()" role="button">
                        <i class="fa fa-minus" style="font-size:15px"></i>
                    </a>
                    <div class="col-sm-1"></div>
                    <a class="btn btn-primary text-white" (click)="increment()"  role="button">
                        <i class="fa fa-plus" style="font-size:15px"></i>
                    </a>            
            </div>
          </div>


 <button type="button"  (click)="sendRecord(Totalcartval.value)" class="btn btn-success" data-toggle="modal" data-target=".bd-example-modal-lg">Add To Cart</button>  

"" "", , " ",

import { Component,EventEmitter,Output } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { SessionStorageService,SessionStorage } from 'angular-web-storage';
import {CartdataService} from '../cartdata.service';


@Component({
  selector: 'app-my-cart',
  templateUrl: './my-cart.component.html',
  styleUrls: ['./my-cart.component.css'],
  outputs :['ChildEvent']
})

export class MyCartComponent  {
  today = Date.now();
  fixedTimezone =this.today;
  public counter : number = 1;   
  res : string;
  public Count : number;


  imageURL:string ="assets/Product _Details/Show1.png";

    increment(){this.counter += 1;}
    decrement(){if(this.counter >1){this.counter -= 1;}}

    public sendRecord(Totalcartval : number ) {  
      this.CartdataService.editCount(Totalcartval);
      this.http.get('http://freegeoip.net/json/?callback')
                 .subscribe(
                    data => this.saveIP(data['ip'],Totalcartval),
                    error => console.error(error)
                 );
    }
    saveIP(address: string,cartval :number) {
      this.http.get(`http://localhost:57036/api/data/CartCount/?IP_ADDRESS=${address}&ITEM_QTY=${cartval}&TIME=${this.fixedTimezone}`)
               .subscribe(data => this.res  = (data['ITEM_QTY']),
               error => console.error(error));       
  } 
 ngOnInit() {}

}

. . .

Answer 1

, , , stackblitz .

.

:

public sendRecord(Totalcartval : number ) {
  this.CartdataService.editCount(Totalcartval);
...

:

public sendRecord() {  
  this._cartDataService.editCount(this.counter);
...

#Totalcartval . , , this.counter, .

@David - NEW TOTAL () . :

  editCount(newCount: number){
    this.currentCount += newCount; 
    this.Count.next(this.currentCount);
  }

FYI -awesome stackblitz, + -