Writing notifying framework to pass selected date to parent component
This commit is contained in:
parent
7a2f03c241
commit
e97cafd1ac
|
@ -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 {
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -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}}
|
||||||
|
|
|
@ -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();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user