Retrieve a value from an HTML table and display it in a field

Question

I have an HTML table with two columns, a solde field and an hyperlink.

image 1

This page is named internal-transfer-details, I retrieve the data correctly.

My problem is that, when I click on the first hyperlink I arrive to the internal-transfer-watch page.

image2

I would like to retrieve the value of the solde field. For example the value 840 in the field.

Did know you how to make this, please?

internal-transfert-details.component.html

<div class="home-content">
  <div class="container" *ngIf="internalTransactionDetails">
    <div class="pt-50">
      <h1 class="text-center pb-3">Transfert Interne - Details</h1>
      <div class="row pt-3 container">
        <div class="card" style="width: 40%;">
          <div class="card-body">
            <table class="table table-striped table-hover">
              <thead class="thead-light">
                <tr class="text-center">
                  <th scope="col">Solde</th>
                </tr>
              </thead>
              <tbody>
                <tr
                  *ngFor="let internalTransactionDetail of internalTransactionDetails"
                >
                  <td scope="row" class="text-center">
                    {{internalTransactionDetail.solde }}
                  </td>
                  <td scope="row " class="text-end">
                    <a
                      [routerLink]="[ '/transferts/internal-transfert-watch/' + internalTransactionDetail.titre.svm ] "
                    >
                      Transfer
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

internal-transaction-details.ts

export interface InternalTransactionDetails {
    titre: {
            label: string;
            isin: string;
            svm: number;
        },

        solde: number;
    qte_vente: number;
    qte_bloq: number;
    qte_trf: number;

}

internal-transfert-details.component.ts

export class InternalTransfertDetailsComponent implements OnInit, OnDestroy {
    private unsubscribe$ = new Subject < void > ();

    internalTransactionDetails: InternalTransactionDetails[] = [];

    constructor(private service: InternalTransfertDetailsService, private router: Router) {}


    ngOnInit(): void {
        this.getTransfert()
    }

    ngOnDestroy(): void {
        this.unsubscribe$.next();
        this.unsubscribe$.complete();
    }

    private getTransfert(): void {

        this.service.getTransfert().pipe(
            takeUntil(this.unsubscribe$)
        ).subscribe(res => {
            if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {

                this.internalTransactionDetails = res.TRANS.map(
                    internalTransactionLine => {
                        return {
                            titre: {
                                label: internalTransactionLine.TITRE.LABEL,
                                isin: internalTransactionLine.TITRE.ISIN,
                                svm: internalTransactionLine.TITRE.SVM,
                            },
                            solde: internalTransactionLine.SOLDE,
                            qte_vente: internalTransactionLine.QTE_VENTE,
                            qte_bloq: internalTransactionLine.QTE_BLOQ,
                            qte_trf: internalTransactionLine.QTE_TRF
                        }
                    }
                );
            }
        });
    }

}

internal-transfert-watch.component.ts

export class InternalTransfertWatchComponent implements OnInit, OnDestroy {
  private unsubscribe$ = new Subject<void>();

  internalTransactionDetails: InternalTransactionDetails[] = [];
  constructor(private service: InternalTransfertWatchService,
    private activatedRoute: ActivatedRoute, private location: Location
    ) { }



    ngOnInit(): void {
      this.getTransfert()
    }
  
    ngOnDestroy(): void {
      this.unsubscribe$.next();
      this.unsubscribe$.complete();
    }
  
    private getTransfert(): void {
  
      this.service.getTransfert().pipe(
        takeUntil(this.unsubscribe$)
      ).subscribe(res => {
        if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
          
          this.internalTransactionDetails = res.TRANS.map(
            internalTransactionLine => {
              return {
                titre: {
                  label: internalTransactionLine.TITRE.LABEL,
                  isin: internalTransactionLine.TITRE.ISIN,
                  svm: internalTransactionLine.TITRE.SVM,
                },
                solde: internalTransactionLine.SOLDE,
                qte_vente: internalTransactionLine.QTE_VENTE,
                qte_bloq: internalTransactionLine.QTE_BLOQ,
                qte_trf: internalTransactionLine.QTE_TRF
              }
            }
          );
        }
      });
    }
}

internal-transfert-watch.component.html

<div class="home-content">
  <div class="container" *ngIf="internalTransactionDetails">
    <div class="pt-50">
      <h1 class="text-center pb-3">Transfert Interne Titre</h1>
      <div class="row pt-3 container">
        <div class="card" style="width: 100%;">
          <div class="card-body">
            <form #formulaire="ngForm" (ngSubmit)="formulaire.form.valid ">
              <div class="row row-cols-3 pt-3">
                <div class="col text-end">
                  <label for="solde" class="form-label">Solde</label>
                </div>
                <div class="col-4">
                  <input
                    id="solde"
                    name="solde"
                    type="text"
                    class="form-control"
                    style="min-width: 380px"
                    maxlength="25"
                  />
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>