Data changes for no reason in angular injectable service

Question

I have a service that contains a list of dateRanges. A dateRange contains a start and endDate. I have two places where I use inject this service and want to use the list. This is my service that contains the data:

import { Component, Injectable } from '@angular/core';
import { DateRange } from 'src/app/models/dateRange';

@Injectable()
export class AvailabilityService {
  private readonly fullDateRanges: DateRange[];

  private readonly fullDates: Date[] =[
    new Date("2023-11-10")
  ]

constructor() {
  this.fullDateRanges = [
    new DateRange("2023-11-17", "2023-11-20"),
    new DateRange("2023-12-15", "2023-12-18"),
    new DateRange("2023-12-30", "2024-01-01"),
    new DateRange("2024-02-12", "2024-02-16"),
    new DateRange("2024-07-13", "2024-07-19"),
    new DateRange("2024-07-13", "2024-07-19"),
    new DateRange("2024-07-24", "2024-08-05"),
    new DateRange("2024-03-14", "2024-03-23"),
    new DateRange("2024-10-31", "2024-11-09"),
  ]
}

public GetFullDatesRangesForAllDates(): DateRange[]{
  var allFullDatesRanges: DateRange[] = this.fullDateRanges;

  this.fullDates.forEach((date: Date) => {
    var dateString: string = date.getFullYear().toString() + "-" + (date.getMonth() + 1).toString() + "-" + date.getDate().toString();
    allFullDatesRanges.push(new DateRange(dateString, dateString))
  });

  allFullDatesRanges.sort((a: DateRange, b: DateRange) => {
    return a.startDate.getTime() - b.startDate.getTime();
  });

 return allFullDatesRanges;
}

  public GetAllFullDates(): Date[]{
    var dates: Date[] = [];

    this.fullDateRanges.forEach((dateRange: DateRange) => {
      var allDatesFromRange: Date[] = this.getDatesFromRange(dateRange)

        allDatesFromRange.forEach((date: Date) => {
        dates.push(date);
      })
    });

    this.fullDates.forEach((date: Date) => {
      dates.push(date);
    })

    return dates;
  }

  private getDatesFromRange(dateRange: DateRange): Date[]{
    var dates: Date[] = [];

    var currentDate: Date = dateRange.startDate;
    while(currentDate <= dateRange.endDate){
      dates.push(new Date(currentDate));
      currentDate.setDate(currentDate.getDate() + 1);
    }

    return dates;
  }
}

I use this service inside this component:

public fullDateRanges: DateRange[];
public displayedColumns: string[] = ['startDate', 'endDate'];
public readableFullDateRanges: ReadableDateRangeFormat[] = [];

  constructor(availabilityService: AvailabilityService){
    this.fullDateRanges = availabilityService.GetFullDatesRangesForAllDates();
    this.getReadableDateStrings();
  }

  private getReadableDateStrings(): void{
    this.fullDateRanges.forEach((dateRange: DateRange) => {
      var startDate: string = dateRange.startDate.getDate().toString()  + "-" + (dateRange.startDate.getMonth() + 1).toString() + "-" + dateRange.startDate.getFullYear().toString();
      var endDate: string = dateRange.endDate.getDate().toString()  + "-" + (dateRange.endDate.getMonth() + 1).toString() + "-" + dateRange.endDate.getFullYear().toString();
      var readableDate: ReadableDateRangeFormat = new ReadableDateRangeFormat();
      readableDate.startDate = startDate;
      readableDate.endDate = endDate;
      this.readableFullDateRanges.push(readableDate);
    });
  }
}

HTML of that component:

  <div class="container">
    <div class="row">
      <div class="col-md-8 mx-auto">
        <div class="heading_container margin_bottom">
          <h4>Hier staan alle datums die wij gesloten of volgeboekt zijn</h4>
        </div>
        <table mat-table [dataSource]="readableFullDateRanges" class="mat-elevation-z8">
          <ng-container matColumnDef="startDate">
            <th mat-header-cell *matHeaderCellDef>Begin datum</th>
            <td mat-cell *matCellDef="let element">{{ element.startDate }}</td>
          </ng-container>

          <ng-container matColumnDef="endDate">
            <th mat-header-cell *matHeaderCellDef>Eind datum</th>
            <td mat-cell *matCellDef="let element">{{ element.endDate }}</td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        </table>
      </div>
    </div>
  </div>
</div>

If I go to the page with this component then I see this:

and that is correct, but if navigate to this component via my other page:

  constructor(private formBuilder: FormBuilder, protected availabilityService: AvailabilityService) {
    this.dogBirthMaxDate = new Date();
    this.fullDates = availabilityService.GetAllFullDates();
  }

HTML

          <div class="mat-form-field-additional-info"> Alle niet aanklikbare datums zijn vol of niet meer beschikbaar</div>
          <div class="mat-form-field-additional-info"> Kijk hier voor alle <a routerLink="/volle-datums"routerLinkActive="active" 
            [routerLinkActiveOptions]="{exact: true}">
              volle datums
            </a></div>
            <mat-form-field class="margin_bottom">
              <mat-label>Wanneer gaat uw hond op vakantie?</mat-label>
              <mat-date-range-input [rangePicker]="comeAndGetDatePicker" [min]="comeMinDate" [dateFilter]="reservationDateFilter">
                <input matStartDate placeholder="DD/MM/JJJJ" formControlName="comeDate" />
                <input matEndDate placeholder="DD/MM/JJJJ" formControlName="getDate" />
              </mat-date-range-input>
              <mat-datepicker-toggle matIconSuffix [for]="comeAndGetDatePicker"></mat-datepicker-toggle>
              <mat-date-range-picker #comeAndGetDatePicker></mat-date-range-picker>
              <mat-error *ngIf="comeDate.errors?.['required']">Een datum is verplicht.</mat-error>
              <mat-error *ngIf="getDate.errors?.['required'] && !comeDate.errors?.['required']">Een ophaal datum is verplicht.</mat-error>
            </mat-form-field>

Then for some reason my data in the service where the data comes from is randomly changed:

All the startDates are changed to the endDate and the endDate are changed to the startDates wwhat results in: I don't know why this is happening, please can anyone help me?