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


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';

  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) {
      } else {
        this.model.splice(index, 1)
      this.resetModel = new Date(0);
      if (!this.CLOSE_ON_SELECTED) {
        const closeFn = this._picker.close;
        this._picker.close = () => { };
        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-chip-list #chipList aria-label="Choose a date" (click)="picker.open()">
      *ngFor="let value of model"
      {{ value | date }}
      <mat-icon matChipRemove *ngIf="true">cancel</mat-icon>
      placeholder="Choose a date"
  <mat-datepicker-toggle matPrefix [for]="picker"></mat-datepicker-toggle>

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 ngx-multiple-dates@13.1.0 and Angular Angular CLI: 13.2.0

The problem i’m having:
enter image description here

Code error :
enter image description here


I think you want to use this simple

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

Answered By – Alexandr Sukhorukov

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.