Search page 2.component.ts
Component variable instead of getter
export class SearchPageComponent implements OnInit {
selectedOption = 'countries';
searchTerm = '';
results$: Observable<any[]> = of([]);
results: any[] = [];
loading: boolean = false;
selectedComponent?: Type<any>;
constructor(
private countryApiService: CountryApiService,
private journalApiService: JournalApiService
) {}
ngOnInit() {}
onSearch(): void {
console.log(`Searching ${this.searchTerm}`);
switch (this.selectedOption) {
case 'countries':
this.searchCountries();
this.selectedComponent = CountryTableComponent;
break;
case 'journals':
this.searchJournals();
this.selectedComponent = JournalTableComponent;
break;
}
}
private searchCountries() {
this.results$ = this.countryApiService.findByName(this.searchTerm);
this.subscribe();
}
private searchJournals() {
this.results$ = this.journalApiService.findByName(this.searchTerm).pipe(
map((journalApiResponse: JournalApiResponse) => {
return journalApiResponse.message.items;
})
);
this.subscribe();
}
private subscribe(): void {
this.loading = true;
this.results$.pipe(take(1)).subscribe({
next: (data) => {
this.results = data;
},
complete: () => {
this.loading = false;
},
});
}
get componentInput() {
return {
apiResults: this.results,
loading: this.loading,
};
}
}