Как отправить форму в Angular и отправить данные обратно?

Question

Я создаю компонент формы, чтобы получить некоторые данные от пользователя и отправить их обратно в другой компонент, который должен быть обновлен в соответствии с этими значениями.

В моем коде у меня есть два компонента: 1) Страница баланса 2) Компонент добавления баланса Мне бы хотелось, чтобы страница баланса обновлялась каждый раз, когда пользователь заполняет форму в компоненте меню баланса, и мне нужносоздайте новую карточку на странице баланса для каждой отправленной формы.

Balance.page.ts:

constructor(
  private router: Router,
  ) { }

ngOnInit() {
  }

addToList() {
  this.router.navigateByUrl('balance-add')
}

balance.page.html:

<ion-content>
  <ion-card>
    <ion-card-header>
      <ion-card-title>Balance:</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <div>
        {{this.balance}}
      </div>
    </ion-card-content>
  </ion-card>

//Here <ion-card> for each form submitted 
//<ion-card *ngFor="let form of list_of_forms"></ion-card>


</ion-content>

<ion-footer>
  <div>
    <ion-icon name="add-circle" (click)="addToList()"></ion-icon>
  </div>
</ion-footer>

Второй компонент - balance-add.component.ts (я не понимаюне знаю, как реализовать метод sendData)

constructor() { }

ngOnInit() {}

sendData() {
// ???
}

и вот HTML:

<div>
  <ion-item>
    <ion-label>How much did you spend?</ion-label>
  <ion-select [(ngModel)]="buy.cost" okText="Okay" cancelText="Dismiss">
    <ion-select-option value="ten">10</ion-select-option>
    <ion-select-option value="twelve">20</ion-select-option>
  </ion-select>
  </ion-item>

  <ion-item>
    <ion-label>What is the item?</ion-label>
  <ion-input [(ngModel)]="buy.item" placeholder="E.g. Eggs></ion-input>
  </ion-item>

<ion-button (click)="sendData()"> ADD TO BALANCE </ion-button>

</div>

Спасибо