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

Issue

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:

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

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:

app.component.html

<app-dialog></app-dialog>
<h2>Add values of my service into array:</h2>
<p>Array:</p>
<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"
  </span>
</div>

app.component.ts

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(() => {
      this.initialize();
    });
  }

  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
    };
    this.data.push(newData);
    console.log(this.data);
  }
}

share-data-service.ts

  private subject = new Subject<any>();

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

  getId() {
    return this.id;
  }

  getTitle() {
    return this.title;
  }

  getAmountCounter() {
    return this.amountCounter;
  }

  sendClickEvent() {
    this.subject.next();
  }

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

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

https://stackblitz.com/edit/angular-ivy-shdyrw?file=src%2Fapp%2Fshare-data.service.ts

Best regards

Solution

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

Add/change the following in your code

in your app.component.ts:

getAmountCounter(){
    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>Array:</p>
<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;
    this.share.sendClickEvent();
  }

https://stackblitz.com/edit/angular-ivy-ufw7cq?file=src/app/app.component.html