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

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.

Continue reading...