Show Page 2 event value in a Page 1 input

Question

I have two pages and I want the value of an event (script below) of Page 2 to be shown in an input of Page 1.

HTML of Page 1:

<ion-list>
    <ion-item text-center>
      <ion-input type="text" [(ngModel)]="forca"></ion-input>
      <ion-label stacked>Força</ion-label>
    </ion-item>
  </ion-list>

HTML of Page 2:

<ion-list>
    <ion-item-sliding #item>
      <ion-item (click)="showConfirm()">
        <ion-avatar item-left>
          <img src="assets/img/adagas.png">
        </ion-avatar>
        <h2>Adagas Sangrentas</h2>
        <h3>Força +1, Agilidade +1</h3>
        <p>Adagas preparadas para derramar sangue, feitas com lâminas forjadas em aço raro e fino.</p>
      </ion-item>

      <ion-item-options side="left">
        <button
          [style.backgroundColor]= "ativo ? 'green' : 'red'"
          (click)="usar()"
        >Usar</button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

Script for Page 2:

usar() {
    this.ativo = !this.ativo;
    this.forca = 1;
    console.log(this.forca);
    }

In this case, by clicking "Use" the "force" input value changes to 1.

Answer 1

One of the ways you can do this is by using Events

https://ionicframework.com/docs/api/util/Events/

In your page 1 you start the event listener.

events.subscribe('usar:forca', (valor) => {
    this.forca = valor
});

Whenever the event 'hang:' is called this function will be executed by passing the value to its strength variable.

In your use() function of page 2 just call the event by passing the strength value.

usar() {
   this.ativo = !this.ativo;
   this.forca = 1;
   console.log(this.forca);
   events.publish('usar:forca', this.forca);
}

I don’t know what the rest of your code looks like. If page 2 needs to be closed just close after triggering the event.