CODEWITHSUNDEEP
javascriptangulartypescriptrxjsobservable
Eric Andre
Eric Andre

Reputation: 266

What is the equivalent to "event.target.value" in Angular?

https://stackblitz.com/edit/angular-ivy-s2ujmr?file=src/app/pages/home/home.component.html

I'm trying to make the dropdown menu work for filtering the flags you see underneath it.

I thought I could implement something similar to what I did for the search bar filtering method, like:

home.component.ts

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

  regionOptions = ['Africa', 'Americas', 'Asia', 'Europe', 'Oceania'];

  countries!: Country[];
  displayCountries?: Country[];

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

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

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

  //SEARCH BAR
  private updateDisplayCountries(searchTerm: string): void {
    this.displayCountries = this.countries.filter((country: Country ) => this.isCountrySearched(country, searchTerm.toLowerCase()))
  }
  private isCountrySearched(country: any, searchTerm: string): boolean {
    return country.name.common.toLowerCase().includes(searchTerm) || country.name.official.toLowerCase().includes(searchTerm)
  }
  
  //DROPDOWN  <-------------------------------------------THIS PART
  private updateDisplayRegions(region: string): void {
    this.displayCountries = this.countries.filter((country: Country ) => this.isRegionFiltered(country, region.toLowerCase()))
  }
  private isRegionFiltered(country: any, selectedRegion: string): boolean {
    return country.region.toLowerCase().includes(selectedRegion)
  }

  

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

and then in the HTML add a "(change)" event listener like this:

home.component.html

<div class="drop-down">
  <select (change)="updateDisplayRegions($event.target.value)">
    <option *ngFor="let region of regionOptions" value="{{region}}">{{region}}</option>
  </select>
</div>

but for this to work (which idk if it's even how you do this or if it would actually work) I need to pass in the dropdown selection value to the function. I'm used to using "event.target.value" in other frameworks, but in Angular I'm getting the errors:

Object is possibly 'null'.ngtsc(2531)

Property 'value' does not exist on type 'EventTarget'.ngtsc(2339)

How do I pass the value of the dropdown selection into the change function so it can go ahead and filter? What does angular use instead of "event.target.value"?

Am I approaching this completely wrong?

Upvotes: 0

Views: 887

Answers (1)

Amit Vishwakarma
Amit Vishwakarma

Reputation: 316

You can pass value via reference as shown below.

<div class="drop-down">
  <select #regionRef (change)="updateDisplayRegions(regionRef.value)">
    <option *ngFor="let region of regionOptions" value="{{region}}">{{region}}</option>
  </select>
</div>

Upvotes: 2

Related Questions