CODEWITHSUNDEEP
javascriptangulartypescriptangular-material
NigelDcruz
NigelDcruz

Reputation: 927

TypeScript error in angular: A function whose declared type is neither 'void' nor 'any' must return a value

I'm trying to highlight dates on a calendar. I'm using angular-material-datepicker with dateClass. The logic is fine but I can't figure out why I'm getting the below error. Can anyone please tell me why I'm getting the below error?

A function whose declared type is neither 'void' nor 'any' must return a value.

HTML:

<mat-calendar *ngIf="loadCalendar" [dateClass]="dateClass()" [selected]="selectedDate" (selectedChange)="onSelect($event)"></mat-calendar>

Ts:

import { DatePipe } from "@angular/common";
import { Component, OnInit } from "@angular/core";
import { MatCalendarCellCssClasses } from "@angular/material";
import { DataService } from "../app/services/data.service";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  providers: [DatePipe],
})
export class AppComponent implements OnInit {
  cardData;
  dates: string[] = [];
  loadCalendar: boolean = false;
  constructor(private data: DataService, public datepipe: DatePipe) {}
  ngOnInit() {
    this.data.getData().subscribe((data) => {
      this.cardData = data;
      this.cardData.forEach((element) => {
        //  console.log(this.datepipe.transform(element.start, 'yyyy/MM/dd'));
        this.dates.push(element.start);
        this.loadCalendar = true;
      });
    });
  }

  dateClass() { //Error is caused by this function
      return (date: Date): MatCalendarCellCssClasses => {

        this.dates.forEach((sD)=>{

          let startDate = this.datepipe.transform(sD, "yyyy/MM/dd");
          let calendarDate = this.datepipe.transform( date.getDate(),"yyyy/MM/dd");
          
          if (calendarDate === startDate) {
            return "special-date";
          } else {
            return "";
          }
        })

      };
  }
}

Upvotes: 0

Views: 5757

Answers (1)

Panagiotis Bougioukos
Panagiotis Bougioukos

Reputation: 18959

 return (date: Date): MatCalendarCellCssClasses => {  <-- !!!You say it returns a MatCalendarCellCssClasses

        this.dates.forEach((sD)=>{

          let startDate = this.datepipe.transform(sD, "yyyy/MM/dd");
          let calendarDate = this.datepipe.transform( date.getDate(),"yyyy/MM/dd");
          
          if (calendarDate === startDate) {
            return "special-date";
          } else {
            return""   
          }
        
        })
       return "" <--- you must also return something here incase forEach does not loop 
}

Edit: Updated answer as question was updated

Upvotes: 2

Related Questions