How can I refresh expand panel in angular?

I have a problem in getting the id's of the card of categorie. When I click on the Note Button it insert data in a table and I am going to use their id to open the cards of sousCategorie. but I can get the id (in yellow color) only when i close the model and open it again ! is there any solution to fix that ?

HTMl code:

<mat-accordion >
    <mat-expansion-panel *ngFor="let i of listCategorie" class="parentPanel"     >
      <mat-expansion-panel-header class="parentPanel_header" (click)="getSouCategories(i.id)" >
        <mat-panel-title > {{i.libelle}} {{i.id}}
          <span class="badge badge-info " style="position:absolute; right:6em"> {{listCategorie.length}} </span>

        </mat-panel-title>

      </mat-expansion-panel-header>

      <mat-accordion multi>
        <mat-expansion-panel style="background-color: #F2EDFF;"  class="childPanel childPanelCount" [expanded]="true" hideToggle disabled>
          <div class="d-flex mt-2">
            <div class="p-2"><p> Nombre des sous catégories </p></div>
          <div class="ml-auto p-2">
          <span class="badge badge-secondary "> {{listSousCategorie.length}} </span>

          </div>
          </div>
        </mat-expansion-panel>

TS code:

getCategories() {
    this.LCategorieService.getCategories(this.idExamen).then((res )=> {
      this.listCategorie = res;
      console.log("testtnoowww",this.idExamen)
    })
  }