I am trying to write an application and I don't know how to change a variable value that is defined in parent component and accessed in child component.

Below is the code for child component:

This is the child component HTML markup:

   <p>Child Component Works!</p>
   <h2>{{name.name1}}</h2>
   <h4>{{name.Money1}}</h4>
    <h2>{{name.name2}}</h2>
   <h4>{{name.Money2}}</h4>

Child component Typescript code:

    import { Component, EventEmitter,  OnInit, Input } from "@angular/core";

   @Component({
        selector: 'app-child-component',
        templateUrl: './child-component.component.html',
        styleUrls: ['./child-component.component.css']
   })
   export class ChildComponentComponent implements OnInit {
      @Input() name;

      constructor() { }
 
      ngOnInit() {
      }
  }

Parent-component.html markup:

 <p>
  Parent Component
  </p>
  <app-child-component [name]="data"></app-child-component>
  <button>
  Send Money To Jack
  </button><br><br>
  
  <button>
  Send Money To Jill
  </button>

Parent-component.ts code:

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

  @Component({
      selector: 'app-parent-component',
      templateUrl: './parent-component.component.html',
      styleUrls: ['./parent-component.component.css']
   })
   export class ParentComponentComponent implements OnInit {
  
      data = {
         name1:'jack',
         Money1:10,
         name2:'Jill',
         Money2:'15'
      }
  constructor() { }

  ngOnInit() {
  }
  }

This is the whole code. And below is the screenshot of output:

This is the output. I want some function that when user clicks on 1st Button then money1 variable gets incremented by 10 and when user clicks on second button then money2 variable gets incremented by 10: