Writing notifying framework to pass selected date to parent component

Frontend/src/app/app.module.ts

@@ -14,6 +14,7 @@ import {DatepickerComponent} from './components/datepicker/datepicker.component'
 import {EventDetailComponent} from './components/event-detail/event-detail.component';
 import {HttpClientModule} from '@angular/common/http';
 import {FormsModule} from '@angular/forms';
+import {ApiService} from './services/api/api.service';
 
 @NgModule({
     declarations: [
@@ -34,7 +35,7 @@ import {FormsModule} from '@angular/forms';
         NgbModule,
         FormsModule
     ],
-    providers: [],
+    providers: [ApiService],
     bootstrap: [AppComponent]
 })
 export class AppModule {

Frontend/src/app/components/datepicker/datepicker.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
 
 @Component({
     selector: 'app-datepicker',
@@ -16,7 +16,7 @@ export class DatepickerComponent implements OnInit {
 
     itIsWednesday: boolean = false;
 
-    selectedMonday: string = '';
+    @Output() selectedMonday = new EventEmitter<string>();
 
     constructor() {
     }
@@ -122,7 +122,7 @@ export class DatepickerComponent implements OnInit {
      */
     handleDateChange(): void {
         let mondayDate = this.findMondayInWeek(this.selectedYear, this.selectedMonth, this.selectedDay);
-        this.selectedMonday = mondayDate;
+        this.selectedMonday.emit(mondayDate);
     }
 
     /**

Frontend/src/app/pages/landingpage/landingpage.component.html

@@ -1,6 +1,6 @@
 <header>
     <p>TINF19B4 RaPla Changes</p>
-    <app-datepicker></app-datepicker>
+    <app-datepicker (selectedMonday)="dateChangedFromPicker($event)"></app-datepicker>
 </header>
 <div id="content">
     Events: {{eventCount}}

Frontend/src/app/pages/landingpage/landingpage.component.ts

@@ -11,19 +11,25 @@ export class LandingpageComponent implements OnInit {
     events: Event[] = [];
     eventCount: number = 0;
 
+    selectedDate: string = '';
+
     constructor(
         private apiService: ApiService
     ) {
     }
 
     ngOnInit(): void {
-        this.getEvents();
     }
 
     getEvents() {
-        this.apiService.getEvents('2021-10-04').subscribe(events => {
+        this.apiService.getEvents(this.selectedDate).subscribe(events => {
             this.events = events;
             this.eventCount = events.length;
         });
     }
+
+    dateChangedFromPicker(newDate: string) {
+        this.selectedDate = newDate;
+        this.getEvents();
+    }
 }