Element implicitly has an 'any' type because expression of type '"_popupComponentRef"' can't be used to index type 'MatDatepicker<Date>'

Question

They gave me this error : Element implicitly has an 'any' type because expression of type '"_popupComponentRef"' can't be used to index type 'MatDatepicker'. Property '_popupComponentRef' does not exist on type 'MatDatepicker'

Please Help me with this problem.

On this line of code : {this._picker['_popupComponentRef'].instance._calendar.monthView._createWeekCells()

Here is my TS code :

import {MatDatepicker, MatDatepickerInputEvent} from '@angular/material/datepicker';

@Component({
  selector: 'app-demandeMultipleDays',
  templateUrl: './demandeMultipleDays.component.html',
  styleUrls: ['./demandeMultipleDays.component.css']
})
export class DemandeMultipleDaysComponent implements OnInit {
  // private _popupComponentRef: ComponentRef<MatTimeSelectContentComponent<D>>;
  public CLOSE_ON_SELECTED = false;
  public init = new Date();
  public resetModel = new Date(0);
  public model = [
    new Date('7/15/1966'),
    new Date('3/23/1968'),
    new Date('7/4/1992'),
    new Date('1/25/1994'),
    new Date('6/17/1998')
  ];
  @ViewChild('picker', { static: true }) _picker: MatDatepicker<Date>;

  public dateClass = (date: Date) => {
    if (this._findDate(date) !== -1) {
      return [ 'selected' ];
    }
    return [ ];
  }

  public dateChanged(event: MatDatepickerInputEvent<Date>): void {
    if (event.value) {
      const date = event.value;
      const index = this._findDate(date);
      if (index === -1) {
        this.model.push(date);
      } else {
        this.model.splice(index, 1)
      }
      this.resetModel = new Date(0);
      if (!this.CLOSE_ON_SELECTED) {
        const closeFn = this._picker.close;
        this._picker.close = () => { };
        this._picker['_popupComponentRef'].instance._calendar.monthView._createWeekCells()
        setTimeout(() => {
          this._picker.close = closeFn;
        });
      }
    }
  }

  public remove(date: Date): void {
    const index = this._findDate(date);
    this.model.splice(index, 1)
  }

  private _findDate(date: Date): number {
    return this.model.map((m) => +m).indexOf(+date);
  }

  constructor() { }

  ngOnInit() {
  }

}

And this is my HTML code :

<mat-form-field>
  <mat-chip-list #chipList aria-label="Choose a date" (click)="picker.open()">
    <mat-chip
      *ngFor="let value of model"
      [selectable]="false"
      [removable]="true"
      (removed)="remove(value)"
    >
      {{ value | date }}
      <mat-icon matChipRemove *ngIf="true">cancel</mat-icon>
    </mat-chip>
    <input
      [value]="resetModel"
      matInput
      [matDatepicker]="picker"
      placeholder="Choose a date"
      (dateChange)="dateChanged($event)"
      [matChipInputFor]="chipList"
      hidden
    />
  </mat-chip-list>
  <mat-datepicker-toggle matPrefix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker
    #picker
    [startAt]="init"
    [dateClass]="dateClass"
  ></mat-datepicker>
</mat-form-field>

The expecting final result is: enter image description here

But without the line where is the problem, no color appeared when clicking a date.

i'm using npm i [email protected] and Angular Angular CLI: 13.2.0

The problem i'm having: enter image description here

Code error : enter image description here

Answer 1

I think you want to use this simple https://stackblitz.com/edit/angular-material-multiple-dates?file=src%2Fapp%2Fdatepicker-overview-example.html,src%2Fapp%2Fdatepicker-overview-example.ts,src%2Fapp%2Fdatepicker-overview-example.css

Try to change this._picker['_popupComponentRef'].instance._calendar.monthView._createWeekCells() on this._picker['_componentRef'].instance._calendar.monthView._createWeekCells()