Отображение MatCalendar с помощью щелчка мыши

Question

как открыть компонент Календарь материалов, используя элемент привязки?Я почти сделал, но календарь всегда открывается в верхнем левом углу страницы:

    <li>
      <mat-calendar class="hidden">
        <input matInput [matDatepicker]="picker" />
        <mat-datepicker #picker></mat-datepicker>
      </mat-calendar>
      <a (click)="picker.open()">
          <i class="zmdi zmdi-calendar"></i>
      </a>
    </li>

Answer 1

После некоторой головной боли я получил решение для этого:

    <li>
      <div class="hidden-control">
        <mat-form-field>
          <input matInput [matDatepicker]="picker" (dateChange)="scheduleDateChange($event)" />
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
      </div>
      <a (click)="picker.open()">
          <i class="zmdi zmdi-calendar text-white"></i>
      </a>
    </li>

класс скрытого управления выглядит следующим образом:

.hidden-control  {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  visibility: hidden;
}

Результат: