Array of data showing in console but not in HTML after passing it through dialog in Angular project

Method that I use to pass the data:

 openDossiersList(): void { 
        if (this.selectedDossier) {
          this.dialog.open(DossiersListDialogComponent, {
            width: '400px',
            data: { selectedDossiers: [...this.lavoriMultipli.multipleWorks] } 
          });
        }
      }

HMTL of DossierListDialogComponent:

<div class="modal-overlay" (click)="onOverlayClick()">
    <h1 style="font-size: larger; display: flex; justify-content: center;">
      Lista Lavorazioni Selezionate
    </h1>
  
    <ul *ngIf="selectedDossiers?.length > 0">
        <li *ngFor="let dossier of selectedDossiers">
          <p>{{ dossier?.PraticaNumero }}</p>
        </li>
      </ul>
      
      
  </div>

TS of DossierListDialogComponent:

import { Component, Inject, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MultipleWork } from 'src/app/models/multiple-work';

@Component({
  selector: 'app-dossiers-list-dialog',
  standalone: true,
  templateUrl: './dossiers-list-dialog.component.html',
  styleUrls: ['./dossiers-list-dialog.component.scss']
})
export class DossiersListDialogComponent {
  selectedDossiers: MultipleWork[] = [];

  constructor(
    private dialogRef: MatDialogRef<DossiersListDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { selectedDossiers: MultipleWork[] },
  ) {
    this.selectedDossiers = data.selectedDossiers;
  }

 

  onOverlayClick(): void {
    this.dialogRef.close();
  }
}

The problem is the ul and everything inside of it is simply not shown at all, even if the data gets sent to the dialog component in the correct way.

I made several tests to be sure that the array gets sent in the proper way and it works, as every console.log (not shown in this code) show the correct set of data. I was wondering if it may be an issue about loading priority? Like the HTML gets loaded before the data gets processed so it's not shown? It's the first time I get this problem and I honestly have no clue what the issue might be.

You have to import either NgIf and NgFor or simply import CommonModule to use these structural directives in HTML. Because your component is standalone:

import { Component, Inject, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MultipleWork } from 'src/app/models/multiple-work';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-dossiers-list-dialog',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './dossiers-list-dialog.component.html',
  styleUrls: ['./dossiers-list-dialog.component.scss']
})

If you are using angular 18 and newer try the newer control flow, there is no imports and is more easier to write: Angular Docs - Control flow

<div class="modal-overlay" (click)="onOverlayClick()">
  <h1 style="font-size: larger; display: flex; justify-content: center;">
    Lista Lavorazioni Selezionate
  </h1>
  @if(selectedDossiers?.length > 0) {
    <ul>
      @for (dossier of selectedDossiers) {
        <li>
          <p>{{ dossier?.PraticaNumero }}</p>
        </li>
      }
    </ul>
  }
</div>