Mat-select is not showing the options: Angular 10

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.