Angular Dynamic Forms with ngbDatepicker causes freeze

Question

I am building a dynamic form with Angular. Everything works fine, until I try to dynamically generate a ngbDatePicker input and the page completely freezes.

Does anyone know what causes the page to hang when inserting an ngbDatepicker dynamically?

Thanks in advance.

dynamic-form.component.html:

<form (ngSubmit)="onSubmit()" [formGroup]="form">
    <app-form-detail-row *ngFor="let field of fields" [formControlName]="field.name"
       rowName="{{field.displayName}}:" [type]="field.type"></app-form-detail-row>
</form>

form-detail-row.component.html:

<div class="input-group input-group-sm" *ngSwitchCase="'date'">
    <input
     class="form-control"
     [class.is-invalid]="submitted && error && !disabled"
     [disabled]="disabled"
     [minDate]="minDate"
     [(ngModel)]="value"
     change)="onDateValueChange($event)"
     (dateSelect)="onValueChange($event)"
     [placeholder]="placeholder"
     ngbDatepicker
     #d="ngbDatepicker"
    />
    <div class="input-group-append" *ngIf="!disabled">
      <button
       class="btn btn-outline-secondary calendar fas fa-calendar-alt"
       type="button"
       (click)="d.toggle()"
      ></button>
   </div>
</div>

service.ts:

getFormFields(): Observable<FormField[]> {
        let fields: FormField[] = [
            {
                displayName: 'Geboortedatum',
                name: 'birthDate',
                type: 'date'
            }
        ];
        return of(fields);
    }

    toFormGroup(fields: FormField[]) {
        const group: any = {};
        fields.forEach((field) => {
            group[field.name] = new FormControl(field.value || '', Validators.required);
        });

        return new FormGroup(group);
    }

Answer 1

Apparently Angular was just being Angular. The problem disappeared for no reason at all...