ngb-datepicker not working in angular material input(matInput)

I want to use ngb-datepicker in material Input . I applied datepicker to mat input successfully. but there is an issue with month and year dropdowns.

I tried following snippet :

<mat-form-field>
<input matInput placeholder="Select Valid Till" name="GodownValidTill" [(ngModel)]="GodownValidTill" ngbDatepicker #d2="ngbDatepicker" required readonly>
<mat-icon style="float:right;height:20px;width:20px;" (click)="d2.toggle()" svgIcon="calendar" title="Calendar"></mat-icon>
</mat-form-field>

Is there any solution for perfect working ?

I tried to reproduce the issue and found that by default ngbDatePicker is appends just below the input field it is attached to. And when we use matInput, the actual input field gets wrapped around various material classes which are causing the problem with the date picker.

So, what we can do is, we can append the date picker to the body using the container property of ngbDatepicker like this. container property currently only supports "body" as a value.

    <mat-form-field>
            <input matInput type="text" ngbDatepicker container="body" #d="ngbDatepicker" (click)="d.open()" placeholder="Date Picker with issue"/>
    </mat-form-field>

here is the stackblitz demo for the same. I hope this will help.