Can't bind to 'options' since it isn't a known property of 'input'.

[tdahlhoff]

I tried to get ngx-gp-autocomplete running with [options] but I get the error

Error: libs/google-maps/src/lib/components/autocomplete-input/google-places-autocomplete-input.component.html:2:89 - error NG8002: Can't bind to 'options' since it isn't a known property of 'input'.

2     <input matInput ngx-gp-autocomplete (onAddressChange)="handleAddressChange($event)" [options]="options">
                                                                                          ~~~~~~~~~~~~~~~~~~~

  libs/google-maps/src/lib/components/autocomplete-input/google-places-autocomplete-input.component.ts:6:18
    6     templateUrl: './google-places-autocomplete-input.component.html'
                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component GooglePlacesAutocompleteInputComponent.

In the component template however the directives [option] property is recognized correctly

I already spend some hours trying to import the NgxGpAutocompleteModule in every different module of our project but for no avail.

I also removed mat-form-field and matInput but it does not change anything.

Without the [options] ngx-gp-autocomplete directive is already running correctly. I still would like to use options to restrict the search to places in my country for example.

Is it possible that there is a problem with the options? Does anyone have any ideas what else I could try?

[dancornilov]

Hello, thank you for using our package. Could you please provide a small project in which you can reproduce this error? Have you tried this approach?

// HTML

<input #placeRef matInput ngx-gp-autocomplete (onAddressChange)="handleAddressChange($event)" [options]="options">

// TS
export Component implements AfterViewInit {
  @ViewChild('placeRef') placeRef: NgxGpAutocompleteDirective;

  ngAfterViewInit(): void {
    this.setAutocompleteCountry();
  }

  setAutocompleteCountry(): void {
      const country = ['DE'];
      this.placeRef.options = { componentRestrictions: { country }, types: ['geocode'] };
      this.placeRef.reset();
  }
}

[tdahlhoff]

Thank you very much for your answer. I have tried this once, but have not yet had any success.

As soon as I add the property [options] to my input, I get the error "Can't bind to 'options'".

If I leave this property out, no error occurs on compile time.

if I follow the suggested path and set options an this.placeRef followed by reset() I get an error "this.placesRef.reset is not a function" shown in browser console. No error for setting the options, but it seems that these are not applied at all.

If i output this.placeRef with console.log it is of type simple ElementRef

I understand that it is hardly possible to determine the specific problem in this way. I am planning a test in an Angular sample project without any other sources of interference. I would then report back here when I have found the time.

[dancornilov]

Hey, can you ensure that you did this actions:

1. Install our package npm i @angular-magic/ngx-gp-autocomplete@latest
2. Import in your our module NgxGpAutocompleteModule in your AppModule -> imports
3. Provide Loader in AppModule -> providers

   {
     provide: Loader,
     useValue: new Loader({
       apiKey: YOUR_API_KEY,
       libraries: ['places'],
     }),
   }

   _NB: Replace this string YOUR_API_KEY with your api key from google console._

4. Use our directive to your input

   <input #ngxPlaces="ngx-places"
                class="input"
                type="text"
                ngx-gp-autocomplete />

   ---

And if you use this directive somewhere deeper in your app, double check NgxGpAutocompleteModule import, it should be imported in same module where is your component which used our directive.

[dancornilov]

Because of inactivity this issue is closed.