[Fixed] Angular how to subtract my array with a value?


I have spent quite a little time for my issue and I hope that you guys can help me with my problem.

My problem is, that I have an array object with few values in there, for example id, title, amountCounter. Let’s just have a look on my amountCounter, because it does count if my button is clicked, but it doesn’t decrement when my array object gets removed.

To better clarify my problem I made few pictures:

This is the picture after I clicked few times on ID 1:

enter image description here

This is the picture after I clicked on "X" so my object gets removed:

enter image description here

As you can see on the pictures, my amountCounter in my array gets added up by 29.99, but it doesn’t decrement by 29.99 if that object gets removed and I just can’t understand why.

I would really appreciate it if you guys can help me, here are my files:


<h2>Add values of my service into array:</h2>
<p>Total: {{amountCounter}}</p>

<div *ngFor="let item of data, let i = index;">
  <span>ID: {{item.id}}</span>
  <span>Title: {{item.title}}</span>
  <span id="remove" (click)="removeElement(i)" class="material-icons">
    Click me to remove and decrement the "amountCounter by 29.99"


export class AppComponent {
  clickEventsubscription: Subscription;

  ngOnInit() {}

  id: number;
  title: String;
  amountCounter: number;
  isClicked: boolean = false;
  data: any = [];

  constructor(private share: ShareDataService) {
    this.clickEventsubscription = this.share.getClickEvent().subscribe(() => {

  removeElement(index: number) {
    this.data.splice(index, 1);

  test() {}

  initialize() {
    this.id = this.share.getId();
    this.title = this.share.getTitle();
    this.amountCounter = this.share.getAmountCounter();

    const newData = {
      id: this.id,
      title: this.title,
      amountCounter: this.amountCounter


  private subject = new Subject<any>();

  title: String;
  id: number;
  amountCounter: number;

  getId() {
    return this.id;

  getTitle() {
    return this.title;

  getAmountCounter() {
    return this.amountCounter;

  sendClickEvent() {

  getClickEvent(): Observable<any> {
    return this.subject.asObservable();

I also created a StackBlitz for getting a better overview of my issue:


Best regards


The solution that I suggested earlier will go as follows –>

Add/change the following in your code

in your app.component.ts:

    var sum = 0;
    this.data.forEach(entry => {
      sum += entry.amountCounter
    return sum;

in your app.component.html:

<h2>Add values of my service into array:</h2>
<p>Total: {{getAmountCounter()}}</p>

also, in your dialog.component.ts:

 clickMe() {
    this.id = this.id + 1;
    this.amountCounter = this.amount;
    this.share.amountCounter = this.amountCounter;
    this.share.title = this.title;
    this.share.id = this.id;


Leave a Reply

(*) Required, Your email will not be published