Update modal body using variables

HTML of the modal:

<ion-buttons slot="end">
      <ion-button color="light" id="open-modal" expand="block"> Riepilogo </ion-button>

    <ion-modal trigger="open-modal" (willDismiss)="onWillDismiss($event)">
          <ion-toolbar style="--ion-toolbar-background: #ee7654; --border-style: ios">
            <ion-buttons slot="start">
              <ion-button color="light" (click)="cancel()">Indietro</ion-button>
            <ion-buttons slot="end">
              <ion-button color="light" (click)="confirm()" [strong]="true">Salva PDF</ion-button>
        <ion-content class="ion-padding">
            <!-- <ion-label position="stacked">Codice cliente</ion-label> -->
            <ion-input type="text" placeholder="Inserisci codice cliente" [(ngModel)]="name"></ion-input>
          <p id="pavimento"></p>
          <p id="parete"></p>
          <p id="illuminazione"></p>
          <p id="corrimano"></p>


    @ViewChild(IonModal) modal: IonModal;

    name: string;

    cancel() {
      this.modal.dismiss(null, 'cancel');
    confirm() {
      this.modal.dismiss(this.name, 'confirm');
    onWillDismiss(event: Event) {
      const ev = event as CustomEvent<OverlayEventDetail<string>>;
      if (ev.detail.role === 'confirm') {
        //this.message = `Hello, ${ev.detail.data}!`;

What i want to do is using this:

const texname = "../assets/textures/" + e.target.id + ".jpg";
      corrname= e.target.id;
document.getElementById('corrimano').innerHTML = corrname;

to update the text inside the modal, but it seems that the 4 IDs inside the p tags doesn’t exist until I open the modal, how can i solve this?

The error i get:

ERROR TypeError: document.getElementById(...) is null

I suggest using reactive patterns with Observables, if the normal binding does not work