Mat-select is not showing the options: Angular 10 - angular10

Question

I wonder what is wrong with my use of mat-select. Because it is not showing the list of options:
<form>
<mat-form-field appearance="standard">
<mat-label>New Error Type</mat-label>
<mat-select [(ngModel)]="selectedNewErrorCode" name="faultType">
<mat-option *ngFor="let faultType of faultTypes" [value]="faultType.code">
{{faultType.label}}
</mat-option>
</mat-select>
</mat-form-field>
<p>Selected error: {{selectedNewErrorCode}}</p>
</form>
The component which is displayed in a modal is the following.
/** Imports animations */
import {slideInAnimation} from '../../animations';
/** Imports models */
import {StackTraceView} from '../../objects/stack-trace-view.model';
import {FaultType} from '../../objects/fault-type.model';
#Component({
selector: 'app-consult-details',
templateUrl: './consult-details.component.html',
styleUrls: ['./consult-details.component.sass'],
animations: [slideInAnimation]
})
export class ConsultDetailsComponent implements OnInit {
constructor() {
}
public flux: StackTraceView;
public modifState = false;
/** Used in resetting the form */
originalFlux: string;
faultTypes: FaultType[];
/** determines if the original error flux should be visible or not */
public originalErrorVisible = false;
/** Sets the new fault type for reanalysing the stack trace */
selectedNewErrorCode: string;
ngOnInit(): void {
}
modifyFlux() {
this.modifState = !this.modifState;
}
sendFlux() {
console.log(`The flux changed to ${this.flux.originalFlux}`);
}
/** Reste the form to its original state */
resetForm() {
document.getElementById('toBeReset').innerHTML = this.originalFlux;
this.flux.originalFlux = this.originalFlux;
this.modifState = false;
}
/** Sets the visibility of the original error flux to flse if it is true and vice versa */
isOriginalErrorVisible() {
this.originalErrorVisible = !this.originalErrorVisible;
}
}
The entire component is displayed in a modal. The variable faultTypes is fed in when the modal is called in the parent component. The corresponding code in the parent component is the following:
const detailsContent = this.specificReportList.filter(
entry => entry.messageId === originalMessageId
)[0];
const modalRef = this.modalService.open(ConsultDetailsComponent, {
size: 'xl',
ariaDescribedBy: 'Details'
});
/** The input sata for the pop-up component */
modalRef.componentInstance.flux = detailsContent;
modalRef.componentInstance.originalFlux = detailsContent.originalFlux;
modalRef.componentInstance.faultTypes = this.faultTypeList;
modalRef.result.then((result) => {
this.closeResult = `Close with ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}```
As a final comment the variable faulttypes is well fed in via the
parent component and when I use nromal select and option I do not have
any problem; The code works very well, the only problem is when I use
mat-select which is important for me beacuse It gives a unifrom look
and feel to my application.