CODEWITHSUNDEEP
javascriptangularangular-material
Ajay Singh
Ajay Singh

Reputation: 171

Material Autocomplete Angular Stopping Api Call when Selected From the Autocomplete Dropdown options

I am using Material Angular Autocomplete Dropdown feature to fill place predictions in my dropdown. I am using onChange of material to call the api from the Service I have created. My issue is that when I select predictions from the select box, an api call gets fired to the node server, because the onChange is fired again. So, I want to stop the Api Call to the service when an option is selected from the dropdown. Here's the code of the template!!

    <mat-form-field>
       <input matInput type="text" name="location" placeholder="Search By Location" aria-label="Location" [matAutocomplete]="auto" formControlName="location">
       <mat-autocomplete #auto="matAutocomplete" [displayWith]="location">
         <mat-option *ngFor="let places of predictions" (optionSelected)="predictionSelected($event)" [value]="places.description">
           <span>{{places.description}}</span>
         </mat-option>
       </mat-autocomplete>
   <mat-form-field>

And in my component.ts I have written a function that would call my google maps services and would fetch my prediction onChange. I have created an event function which is (optionSelected) which fires when value from the dropdown is selected.

predictionFilled = false;
ngOnInit() {
    this.customForm.get('location').valueChanges.subscribe(
      (value) => this.onChangeLocation(value)
    );
  }

  onChangeLocation(location) {
    if ( this.predictionFilled ) {
      return;
    }
    this.googleMapsService.suggestPlaces(location);
    this.placesPredictions = this.googleMapsService.getPredictionsUpdateListener().subscribe((predictions: Places[]) => {
      console.log(predictions);
      this.predictions = predictions;
    });
  }

  predictionSelected(event: any) {
    this.predictionFilled = true;
  }

The issue is that when I click the options from the dropDown the event (optionSelected) is fired after the valueChanges event. Technically, the event optionSelected should fire before the onChange but I don't understand why the event valueChanges is fired before the optionSelected event.

Upvotes: 2

Views: 2436

Answers (1)

Amit Chigadani
Amit Chigadani

Reputation: 29785

You are doing nothing with the event inside predictionSelection().

You can simply write that single line within formControl valueChanges event and remove (optionSelected)="predictionSelected($event)" from the mat element where it is registered. Also no need of predictionSelected(event : any) method.

To stop calling api call, you can check if the value entered exists in the predictions array and then make the decision.

this.customForm.get('location').valueChanges.subscribe(
      (value) => {
           if (this.predictions.findIndex(value) > -1) {
                  this.predictionFilled = true; // value exists, then do not make api call
           }
           else {
                this.predictionFilled = false; // make api call
           }
           this.onChangeLocation(value);
      }
 );

Upvotes: 2

Related Questions