After attempting to assign a moment to a new variable, I noticed that the value changes on its own without any modification from my end.

Despite various attempts such as forcing the use of UTC and adjusting timezones, the value continues to change unexpectedly.

@Component({
  selector: 'app-appointment-create',
  templateUrl: './appointment-create.component.html',
  styleUrls: ['./appointment-create.component.css']
})
export class AppointmentCreateComponent implements OnInit {

  appointment: CreateAppointmentDto;
  form: FormGroup;
  private formSubmitted: boolean;
  tasks: Task[];
  availability: Availability[];
  task: number;
  availablemoments: Moment[];

  constructor(
    private titleService: Title,
    private router: Router,
    private appointmentService: AppointmentService,
    private taskService: TasksService,
    private webLogger: WebloggerService,
    private availabilityService: AvailabilityService,
  ) {
    this.appointment = new CreateAppointmentDto();
  }

  dateFilter = (d: Moment): boolean => {
    return this.availability.filter(s => s.timestampstart.isSame(d, 'day')).length >= 1;
  }

  ngOnInit() {
    this.titleService.setTitle('New Appointment');

    this.taskService.getActiveTasks().subscribe(value => {this.tasks = value; });

    this.form = new FormGroup({
      timestampstart: new FormControl(this.appointment.timestampstart, Validators.required),
      daystart: new FormControl(this.appointment.timestampstart, Validators.required),
      location: new FormControl(this.appointment.location, Validators.required),
      description: new FormControl(this.appointment.description, Validators.required),
      paid: new FormControl(false, Validators.required),
      serviceType: new FormControl(this.appointment.serviceTypeId, Validators.required),
      client: new FormControl(this.appointment.clientId, Validators.required),
      assignedUser: new FormControl(this.appointment.assignedUserId, Validators.required),
    });
  }

  onSubmit(event) {
    event.preventDefault();
    this.formSubmitted = true;

    if (this.form.valid) {
      this.form.disable();
      this.appointment.timestampstart = this.form.get('timestampstart').value;
      this.appointment.location = this.form.get('location').value;
      this.appointment.description = this.form.get('description').value;
      this.appointment.paid = this.form.get('paid').value;
      this.appointment.serviceTypeId = this.form.get('serviceType').value;
      this.appointment.clientId = this.form.get('client').value;
      this.appointment.assignedUserId = this.form.get('assignedUser').value;
      this.appointmentService.createNewAppointment(this.appointment)
        .subscribe(value => { this.router.navigate([`/dashboard/appointment/${value.id}/edit`]); });
    } else {
      this.webLogger.error('The form is invalid, please check the values');
    }
  }

  selectTask($event: Event) {
    this.task = Number(this.form.get('serviceType').value);
    this.availabilityService.getAvailabilityForTask(this.task).subscribe(value => {
      this.availability = value;
    });
  }

  setTime($event: Event) {
    this.availablemoments = [];
    const dayAvailability: Availability[] = this.availability.filter(
      s => s.timestampstart.isSame(moment(this.form.get('daystart').value), 'day'));
    const currentDate = dayAvailability.reduce((prev, curr) => prev.timestampstart < curr.timestampstart ? prev : curr).timestampstart;
    dayAvailability.forEach(value => {
      while (value.timestampend.isAfter(currentDate)) {
        if (!this.availablemoments.includes(moment(currentDate))) {
          this.availablemoments.push(moment(currentDate));
        }
        currentDate.add(30, 'minutes');
      }
    });
  }
}

The `availability` array consists of objects with start and end moments.

I anticipate that the output from the second console log should match the first console log.

UPDATE:

This is how the `Availability` class is structured:

export class Availability {
  id: number;
  timestampstart: Moment;
  timestampend: Moment;
  location: string;
  description: string;
  paid: boolean;
  payment: Invoice;
  serviceType: Task;
  client: Client;
  assignedUser: User;

  static serialize(data: any): Availability {
    const user: Availability = Object.assign(new this(), data);
    if (data.hasOwnProperty('timestampstart')) {
      user.timestampstart = moment(data.timestampstart);
    }
    if (data.hasOwnProperty('timestampend')) {
      user.timestampend = moment(data.timestampend);
    }
    if (data.hasOwnProperty('serviceType')) {
      user.serviceType = Task.serialize(data.serviceType);
    }
    if (data.hasOwnProperty('client')) {
      user.client = Client.serialize(data.client);
    }
    if (data.hasOwnProperty('assignedUser')) {
      user.assignedUser = User.serialize(data.assignedUser);
    }
    return user;
  }
}