JSON

HTML

<form [formGroup]="eventForm" class="filter">
  <select formControlName="selectedDate" (change)="onDateChange()">
    <option value="2023-11-22">2023. November 22.</option>
    <option value="2023-11-23">2023. November 23.</option>
    <option value="2023-11-24">2023. November 24.</option>
  </select>
</form>

<pre>{{ eventDataString }}</pre>

TS

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.scss'],
  standalone: true,
  imports: [NgFor, NgIf, LocalizeModule, AsyncPipe, ContentComponent, TimelineComponent, ReactiveFormsModule],
})
export class FilterComponent implements OnInit {
  eventDataString = '';

  eventForm = new FormGroup({
    selectedDate: new FormControl('2023-11-22'),
  });
  eventData: any;

  constructor(private readonly apiService: TimelineService) {}

  ngOnInit(): void {
    this.fetchData();
  }

  fetchData(): void {
    const selectedDate = this.eventForm.get('selectedDate')?.value;
    if (typeof selectedDate === 'string') {
      this.apiService.getTimelineEvents$(selectedDate).subscribe((data) => {
        this.eventData = data;
        this.eventDataString = JSON.stringify(data, null, 2); // Az "eventDataString" változót frissíted az adatokkal
      });
    }
  }

  onDateChange(): void {
    this.fetchData();
  }
}