HTML/Angular - Passing a On-Click value to another html element on the same component

Fairly noob on this so any help is appreciated.

I have a Mat Table which display a specific range of data from my firestore on display, I wish to click a specific row and show it on a list below my table, I was able to get row data using onClick and I want to pass that data on the list which is on the same component.

Component HTML

              <!-- The following are on the same component, just different HTML element-->
    
              <tr mat-row 
                  *matRowDef="let row; columns: displayedColumns;"
                  (click)="onRowsClicked(row)"
                 
              ></tr>
        
   
   
              <ul class="account-information-list">
                  <li>Customer Number:</li>
                  <li>Account Number:</li>
                  <li>Customer Name:</li>

Component TS

onRowsClicked(rows: Customer) {
    console.log('Row Clicked', rows)
    
    }

Create a variable to store the data of the selected row, use string interpolation inside of your UL to display said data.

selectedRow: Customer = null;

onRowsClicked(row: Customer) {
  this.selectedRow = row;
}

 <ul class="account-information-list" *ngIf="selectedRow">
     <li>Customer Number: {{selectedRow.customerNumber}}</li>
     <li>Account Number: {{selectedRow.accountNumber</li>
     <li>Customer Name: {{selectedRow.customerName}}</li>

Something to this affect, of course change the whole customer row.customerNumber, etc. to match your actual property in the Customer object. I can't recall if this will need two way bindings, I don't think it will.