Hey @Eric Andre, have you considered using the combineLatestWith method in your code? Adding a filter pipe could also be beneficial. Check out this StackBlitz for more information:

StackBlitz Link

import { Pipe, PipeTransform } from '@angular/core';
            
@Pipe({name: 'filterCountries'})
export class FilterCountriesPipe implements PipeTransform {
   transform(items, input: string): any {
      if (!items || !input || !input.replace(/[\n\r\s\t]+/g, '')) {
         return items;
      }
      return items.filter((item) => item.name.official.toLowerCase().includes(input.toLowerCase()));
 }
}

Check out the HomeComponent template:

<input placeholder="Filter Countries" [(ngModel)]="inputValue" type="text" />
<app-country-card *ngFor="let country of countries$ | async | filterCountries: inputValue" [country]="country"></app-country-card>

Here is the HomeComponent component:

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../api.service';
    
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.css'],
    })
    export class HomeComponent implements OnInit {
      countries$: any;
      inputValue: string;
      constructor(private api: ApiService) {}
    
      ngOnInit() {
        this.countries$ = this.api.getAllCountries();
      }
    }`

And lastly, the AppModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing/app-routing.module';
import { AppComponent } from './app.component';
import { CountryCardComponent } from './country-card/country-card.component';
import { HomeComponent } from './pages/home/home.component';
import { HttpClientModule } from '@angular/common/http';
import { FilterCountriesPipe } from './pipes/filter-countries.pipe';

@NgModule({
  declarations: [
    AppComponent,
    CountryCardComponent,
    HomeComponent,
    FilterCountriesPipe,
  ],
  imports: [BrowserModule, AppRoutingModule, HttpClientModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Utilizing combineLatestWith may seem like the obvious choice in this scenario, but there is a much simpler solution available.

Upon closer examination of the issue at hand, it becomes clear that our main challenge lies in filtering a dataset based on a specific search term.

The following code snippet demonstrates how this can be achieved:

export class HomeComponent implements OnInit, OnDestroy {
  constructor(private api: ApiService){}

  countries: any[];
  displayCountries: any[];

  destroy$ = new Subject<void>()
  countryControl = new FormControl();

  ngOnInit(){
    this.api.getAllCountries().subscribe(response => {
      this.countries = response;
      this.displayCountries = response;
    });

    this.countryControl.valueChanges.pipe(takeUntil(this.destroy$),debounceTime(100)).subscribe((value: string) => this.updateDisplayCountries(value))
  }

  private updateDisplayCountries(searchTerm: string): void {
    this.displayCountries = this.countries.filter(country => this.isCountrySearched(country, searchTerm.toLowerCase()))
  }

  private isCountrySearched(country: { name: { common: string, official: string} }, searchTerm: string): boolean {
    return country.name.common.toLowerCase().includes(searchTerm) || country.name.official.toLowerCase().includes(searchTerm)
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

Introducing three new variables:

• displayCountries: represents the list of countries to be shown to users when they apply filters. It is a subset of the countries array, ensuring access to the complete list without complications associated with combineLatestWith.
• countryControl: a FormControl aiding in utilizing input field values.
• destroy$: manages prevention of memory leaks.

Key methods include:

• ngOnInit: initiates the request for all countries and assigns retrieved data to both countries and displayCountries. Utilizes form control subscription for input value changes with precautions against memory leaks.
• updateDisplayCountries: applies filtering logic to each country, converting search terms to lowercase to avoid case sensitivity issues.
• isCountrySearched: compares search term against common or official country names, using lowercase conversion for consistency.
• ngOnDestroy: safeguards against memory leaks.

A minor adjustment is required in the HTML of HomeComponent:

<input placeholder="Filter Countries" [formControl]="countryControl" type="text" value="">
<app-country-card *ngFor="let country of displayCountries" [country]="country"></app-country-card>

Addition of ReactiveFormsModule to module imports (e.g., AppModule) is essential for this functionality.

According to @churill's input, the combineLatest function is not deprecated but now requires parameters to be wrapped in a tuple. The previous version that accepted ...args as arguments is no longer supported. (Referring to

combineLatest(first$, second$, ..., nth$)

To correctly use combineLatest, follow these steps:

this.countries$ = combineLatest([
  this.loadCountries$, 
  this.searchTerm$
])
.pipe(
    map(([countries, searchTerm]) => yourFilterFunction(countries, searchTerm)),
);

Update:
Upon reviewing the rxjs operator sources ('

node_modules/rxjs/src/internal/observable/combineLatest.ts

export function combineLatest<T extends Record<string, ObservableInput<any>>>(
  sourcesObject: T
): Observable<{ [K in keyof T]: ObservedValueOf<T[K]> }>;

The method mentioned above allows for the following usage:

this.countries$ = combineLatest({
  countries: this.loadCountries$, 
  searchTerm: this.searchTerm$
})
.pipe(
    map(({countries, searchTerm}) => yourFilterFunction(countries, searchTerm)),
);