Angular - How can I add amounts in a button?

Question

My problem is, that I can't add amounts in a button.

My code looks like this:

navbar.component.html:

<button>0,00$</button>
<button function="onClick()">Add 5</button>

and

navbar.component.ts

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

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss'],
})
export class NavbarComponent {

  onClick(){
    //add 5 when clicked
  }


}

I would really appreciate it if someone could help me out. I can't get it to work that if I click on the button with the function, that I can add 5$ to the other button.

Thanks!

Answer 1

Please try=>
HTML:

<button>{{sumValue}}</button>
<button (click)="onClick()">Add 5</button>

TS:

export class AppComponent  {
  sumValue:number=0;
  onClick(){
    this.sumValue=this.sumValue+5;
  }
}