angular datepicker is not displayed in mat-menu

Question

I would like to display a calendar to the mat-menu, because I want to look like airbnb, where you click a button and the calendar is being opened, but the calendar is not being displayed.

This is the code:

       <div fxFlex="0 1 auto">
            <button mat-raised-button [matMenuTriggerFor]="dateRangeMenu">
                {{startEndDate}}
            </button>
            <mat-menu #dateRangeMenu="matMenu" [overlapTrigger]="false">

                <aa-animatepicker [options]="datepickerOptions" [(selectedDates)]="dates"
                    (click)="$event.stopPropagation()">
                </aa-animatepicker>

            </mat-menu>
        </div>

Does anybody know how to accomplish this?

Answer 1

You should use

   <ng-template matMenuContent>

if you want to incorporate datepicker in mat-menu.