Angular add toggle switch inside datepicker calendar

Question

Is it possible to add the toggle switch inside the calender? I want to put it at the top of the calender when the calendar is open so the user can choose to show date details by the toggle switch

<form #uploadForm="ngForm" (keydown.enter)="$event.preventDefault()">
  <div class="input-wrapper">
    <mat-form-field>
      <input
        id="date"
        name="date"
        [disabled]="datePickerDisabled || uploadForm.submitted"
        [matDatepicker]="datepicker"
        placeholder="Expiration date"
        autocomplete="off"
        matInput
        required />
      <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
      <mat-datepicker touchUi #datepicker></mat-datepicker>
    </mat-form-field>
    <div class="tooltip">This field is required.</div>
    <mat-slide-toggle
      (change)="setMaxExpirationDate($event)">Show Date Details</mat-slide-toggle>  
  </div>
</form>

Answer 1

I think you has two aproachs

1.-Customize the header, see the docs:customizing header

From this SO answer. replicate the header:

/** Custom header component for datepicker. */
@Component({
  selector: 'example-header',
  template: `
<mat-slide-toggle
      (change)="setMaxExpirationDate($event)">Show Date Details</mat-slide-toggle> 
  <div class="mat-calendar-controls">
    <button mat-button type="button" class="mat-calendar-period-button"
            (click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel"
            cdkAriaLive="polite">
      {{periodButtonText}}
      <div class="mat-calendar-arrow"
           [class.mat-calendar-invert]="calendar.currentView != 'month'"></div>
    </button>

    <div class="mat-calendar-spacer"></div>

    <ng-content></ng-content>

    <button mat-icon-button type="button" class="mat-calendar-previous-button"
            [disabled]="!previousEnabled()" (click)="previousClicked()"
            [attr.aria-label]="prevButtonLabel">
    </button>

    <button mat-icon-button type="button" class="mat-calendar-next-button"
            [disabled]="!nextEnabled()" (click)="nextClicked()"
            [attr.aria-label]="nextButtonLabel">
    </button>
  </div>
</div>  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ExampleHeader extends MatCalendarHeader<any> {

  /** Handles user clicks on the period label. */
  currentPeriodClicked(): void {
    this.calendar.currentView = this.calendar.currentView == 'month' ? 'multi-year' : 'month';
  }
}

(change the .html to add the controls you want)

2.-Enclose the mat-datepicker in a mat-menu, like it showed in this another SO answer

Updated Access to an element of header it's not very easy. but control the toogle in easy if we use an intermediate service Imagine you has a service like

@Injectable({
  providedIn: "root"
})
export class CalendarService {
  private _event = new Subject<void>();
  public onEvent = this._event as Observable<any>;
  constructor() {}

  command(value: any) {
    this._event.next(value);
  }
}

You can inject the service in the constructor of customHeader

constructor(
    private _calendar: MatCalendar<D>,
    private _dateAdapter: DateAdapter<D>,
    @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats,
    cdr: ChangeDetectorRef,
    private service: CalendarService
  )

Then, if our toogle call a function

<mat-slide-toggle #toogle (change)="toogleChange($event)">
    Show Date Details
</mat-slide-toggle>

The function becomes like

  toogleChange(event: any) {
    this.service.command(event);
  }

Just in ngOnInit in the component subscribe to the service

ngOnInit() {
    this.service.onEvent.subscribe(res => {
      console.log(res.checked);
    });
  }

You can see in stackblitz