Writing notifying framework to pass selected date to parent component

This commit is contained in:
Patrick Müller 2021-09-30 13:41:46 +02:00
parent 7a2f03c241
commit e97cafd1ac
4 changed files with 14 additions and 7 deletions

View File

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

View File

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

View File

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

View File

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