Angular datepicker not updating

Question

I'm using a custom datepicker from Clarity Design System. I then want to use the updated date to update a child component. but although I can see the correct date when I do console.log, every time I pick a different date from the datepicker, the data in the child component doesn't update accordingly. I don't know what I'm missing. Here is my parent template:

 <clr-tab>
        <button clrTabLink>HHX-Detail</button>
        <clr-tab-content *clrIfActive>
          <form clrForm>
          <clr-date-container>
            <label>Choose Date</label>
            <input type="date" [clrDate]="selectedDate$ | async" name="date" (clrDateChange)="changeDate($event)"/>
          </clr-date-container>
          </form>
            <app-breakdown-week [caregiverId]="caregiver?.HHXcaregiverId" [date$]="selectedDate$" ></app-breakdown-week>
        </clr-tab-content>
      </clr-tab>

here is my parent component

import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {BehaviorSubject, Observable} from 'rxjs';
import {Caregiver} from '../caregiver.interface';
import {AngularFirestore} from '@angular/fire/firestore';
import {Location} from '@angular/common';
import {environment} from '../../../environments/environment';
// import {firebase} from "firebaseui-angular";
// import {datesAreEqual} from "@clr/angular/forms/datepicker/utils/date-utils";
// import EventEmitter = require("events");


@Component({
  selector: 'app-caregiver',
  templateUrl: './caregiver.component.html',
  styleUrls: ['./caregiver.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,

})
export class CaregiverComponent implements OnInit {

  subComponents: any = [
    { label: 'Bank Accounts', path: 'bank-accounts'},
    { label: 'Benefit Cards', path: 'benefit-cards' },
    { label: 'Debit Cards', path: 'debit-cards' }
  ];

  // tslint:disable-next-line:variable-name
  api_root = environment.API_ROOT;


  caregiverId = this.activatedRoute.snapshot.paramMap.get('caregiverId');
  caregiver$: Observable<Caregiver> = this.afs
    .collection<Caregiver>('caregivers')
    .doc<Caregiver>(this.caregiverId)
    .valueChanges()
    .pipe();
  selectedDate$ = new BehaviorSubject<Date>(new Date());

  constructor(private activatedRoute: ActivatedRoute,
              public afs: AngularFirestore,
              private location: Location) {
  }

  ngOnInit(): void {
  }

  backClicked(): any {
    this.location.back();
  }

  changeDate(date: Date): void{
    this.selectedDate$.next(date);
    console.log(date);
    console.log(this.selectedDate$);
  }
}

here is my child component

import { HttpClient } from '@angular/common/http';
import {
  Component,
  OnInit,
  ChangeDetectionStrategy,
  Input, Output, EventEmitter
} from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-breakdown-week',
  templateUrl: './breakdown-week.component.html',
  styleUrls: ['./breakdown-week.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BreakdownWeekComponent implements OnInit {
  @Input() caregiverId: any | undefined;
  @Input() date: Date ;

  breakdownWeek$: Observable<BreakdownWeek> = new Subject<BreakdownWeek>();

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.breakdownWeek$ = this.http.post<BreakdownWeek>(
      `${environment.API_ROOT}Caregiver/GetWeekBreakdown?caregiverId=${
        this.caregiverId
      }&date=${this.date?.toLocaleDateString()}&includeNonEligible=true`,
      {}
    );
    console.log(this.date);
  }


}

// Generated by https://quicktype.io

export interface BreakdownWeek {
  visits: Visit[];
  totalHours: number;
  hourlyRate: number;
  totalEstimatedEarnedIncome: number;
  totalAfterTaxes: number;
  maximumAllowedAmount: number;
  agencyPayday: string;
}

export interface Visit {
  visitId: number;
  visitDate: string;
  visitStart: null | string;
  visitEnd: null | string;
  billlableHours: number;
  eligible: boolean;
}

and here is my child template

<ng-container *ngIf="breakdownWeek$ | async as breakdown; else loading">
  <table class="table">
    <caption>
      Pay Week Ending
      {{
        breakdown.visits[breakdown.visits.length - 1]?.visitDate
          | date: "shortDate"
      }}
    </caption>
    <thead>
      <tr>
        <th class="left">Date</th>
        <th>Clock-In</th>
        <th>Clock-Out</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let visit of breakdown?.visits">
        <td class="left">{{ visit.visitDate | date: "fullDate" }}</td>
        <td>{{ visit.visitStart| date: "h:mm a" }}</td>
        <td>{{ visit.visitEnd | date: "hh:mm a" }}</td>
        <td>{{ visit.billlableHours }}</td>
      </tr>
    </tbody>
  </table>
  <div class="pl-20 pr-20">
    <div class="clr-row clr-justify-content-between">
      <div>Total Hours:</div>
      <div>{{ breakdown?.totalHours }}</div>
    </div>
    <div class="clr-row clr-justify-content-between">
      <div>Hourly Rate:</div>
      <div>{{ breakdown?.hourlyRate | currency }}</div>
    </div>
    <div class="clr-row clr-justify-content-between">
      <div>Total estimated earned income:</div>
      <div>{{ breakdown?.totalEstimatedEarnedIncome | currency }}</div>
    </div>
    <div class="clr-row clr-justify-content-between">
      <div>Available after taxes:</div>
      <div>{{ breakdown?.totalAfterTaxes | currency }}</div>
    </div>
    <div class="clr-row clr-justify-content-between">
      <div>Maximum amount per transfer:</div>
      <div>{{ breakdown?.maximumAllowedAmount | currency }}</div>
    </div>
    <div class="clr-row clr-justify-content-between">
      <div>Scheduled agency payday:</div>
      <div>{{ breakdown?.agencyPayday | date: "shortDate" }}</div>
    </div>
  </div>
</ng-container>

<ng-template #loading>
  <div class="progress loop">
    <progress></progress>
  </div>
</ng-template>

I've been stuck on this all day :(

Answer 1

the problem was that that the @input date had to be an observable so we it can listen to the changed date and update the data from the server. I will update the code above.