В чём проблема с запросами?

Question

[Evgen Bolat]

Пробую написать свой первый календарь с привязкой событий к серверу.
Проблема в том, что при нажатии на ячейку календаря начинает происходить бесконечная отправка запросов, и я не понимаю, почему так происходить. Подскажите, пожалуйста, в чём проблема.
Пока что проверяю, что просто запрос работает, поэтому выбор ячейки не влияет на сам запрос.
Html код компонента

<div class="calendar-container">
  <div class="calendar">
    <div class="calendar-headline">
      <div class="calendar-headline-controls">
        <div class="calendar-headline-control"(click)="goToPreviousMonth()">«</div>
        <div class='calendar-headline-current-date'>
          {{firstDayOfActiveMonth().monthLong![0].toLocaleUpperCase() +
          firstDayOfActiveMonth().monthLong!.slice(1)}},
          {{firstDayOfActiveMonth().year}}
        </div>
        <div class="calendar-headline-control" (click)="goToNextMonth()">»</div>
      </div>
    </div>
    <div class="calendar-weeks-grid">
      @for (weekDay of weekDays(); track $index) {
      <div class="calendar-weeks-grid-cell">
        {{weekDay}}
      </div>
      }
    </div>
    <div class="calendar-weeks-grid">
      @for (dayOfMonth of daysOfMonth(); track $index) {
      <div
        [ngClass]="{'calendar-grid-cell' : true, 'calendar-grid-cell-today' : dayOfMonth.toISODate() == today().toISODate(),
        'calendar-grid-cell-inactive' : dayOfMonth.month !== firstDayOfActiveMonth().month}" (click)="activeDay.set(dayOfMonth)">
        {{dayOfMonth.day}}</div>
      }
    </div>
  </div>
</div>
<div class="events-container">
  @if (activeDay()) {
    <div class="events-container">
      @for (event of getEvents(activeDay()!) | async; track event.id) {
      <div class="event">
        <div class="event-name">{{event.name}}</div>
        <div class="event-description">{{event.description}}</div>
      </div>
      }
    </div>
  }
</div>

логика компонента (ts)

import { CommonModule } from '@angular/common'
import {
  Component,
  computed,
  inject,
  InputSignal,
  signal,
  Signal,
  WritableSignal,
} from '@angular/core';
import { DateTime, Interval } from 'luxon';
import { CalendarService } from '../../data/services/calendar-service.service';
import { toObservable } from '@angular/core/rxjs-interop'

@Component({
  selector: 'app-calendar',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './calendar.component.html',
  styleUrl: './calendar.component.scss',
})
export class CalendarComponent {
  calendarService = inject(CalendarService)
  today: Signal<DateTime> = signal(DateTime.local());
  activeDay: WritableSignal<DateTime | null> = signal(null);
  firstDayOfActiveMonth: WritableSignal<DateTime> = signal(
    this.today().startOf('month')
  );

  weekDays: Signal<string[]> = signal([
    'Пн',
    'Вт',
    'Ср',
    'Чт',
    'Пт',
    'Сб',
    'Вс',
  ]);

  daysOfMonth: Signal<DateTime[]> = computed(() => {
    return Interval.fromDateTimes(
      this.firstDayOfActiveMonth().startOf('week'),
      this.firstDayOfActiveMonth().endOf('month').endOf('week')
    ).splitBy({ days: 1 }).map(d =>{
      if(d.start === null){
        throw new Error('wrong dates');
      }
      return d.start;
    })
  });

  goToPreviousMonth(){
    this.firstDayOfActiveMonth.set(this.firstDayOfActiveMonth().minus({months: 1}))
  }
  goToNextMonth(){
    this.firstDayOfActiveMonth.set(this.firstDayOfActiveMonth().plus({months: 1}))
  }


  getEvents(date: DateTime) {
    console.log(date.toFormat('dd-MM-yyyy'))
    return this.calendarService.getEvents(date.toFormat('dd-MM-yyyy'))
  }
}

код сервиса, на котором запускается вызов запроса

import { HttpClient } from '@angular/common/http'
import { inject, Injectable } from '@angular/core';
import { DayEvent } from '../interfaces/event.interface'

@Injectable({
  providedIn: 'root'
})
export class CalendarService {
  http = inject(HttpClient);

  getEvents(date: String) {
    return this.http.get<DayEvent[]>(`https://7db8a3ba-ba18-405f-bbf9-39723c52f846.mock.pstmn.io/events/03-07-2024`)
  }

  constructor() { }
}

интерфейс события:

export interface DayEvent {
  id: number
  name: string
  date: string
  description: string
  project: string
  author: string
}