options not working with Angular 11

[sk4092]

trying to add place autocomplete in my Angular 11 web app it works fine without options but while trying to add options it throws error, following are the details

component : <input ngx-google-places-autocomplete [options]='options' #placesRef="ngx-places" (onAddressChange)="handleAddressChange($event)"/> my options object: options = { types: ['address'], componentRestrictions: { country: ['ca', 'us'] } };

after adding options it throws error error TS2739: Type '{ types: string[]; componentRestrictions: { country: string[]; }; }' is missing the followin g properties from type 'Options': bounds, fields, strictBounds, origin

I tried adding other options but it keeps on asking for more n more options

[dkpatoliya]

It is typescript error try this

import { Options } from 'ngx-google-places-autocomplete/objects/options/options';

***
options = {
types: ['address'],
componentRestrictions: { country: ['ca', 'us'] }
}  as Options;
***

[lakson]

add ? within all items of Options class in options.d.ts file from 'node_modules/ngx-google-places-autocomplete/objects/options/options' folder. Like this:

  export declare class Options {

        bounds?: LatLngBounds;

        componentRestrictions?: ComponentRestrictions;

        types?: string[];

        fields?: string[];

        strictBounds?: boolean;

        origin?: LatLng;

        constructor(opt?: Partial<Options>);
  }

It's worked for me!

[tgt87]

The following works for me:

component.html

<input class="form-control" id="searchAddress" name="searchAddress" placeholder="Address"
            [(ngModel)]="searchAddress" ngx-google-places-autocomplete #placesRef="ngx-places"
            (onAddressChange)="handleAddressChange($event)" />

component.ts

import { GooglePlaceDirective } from "ngx-google-places-autocomplete";

@ViewChild("placesRef") placesRef! : GooglePlaceDirective;

ngAfterViewInit(){
    this.placesRef.options.componentRestrictions = { country: 'SG' }
    this.placesRef.options.fields = ["formatted_address", "geometry", "place_id"]
}

[garvraj]

[options]='options'

I tried like this and it worked for me

component : <input ngx-google-places-autocomplete [options]='options' #placesRef="ngx-places" (onAddressChange)="handleAddressChange($event)"/> my options object: options = { types: ['address'], componentRestrictions: { country: ['ca'] } } as unknown as Options;

[garvraj]

add ? within all items of Options class in options.d.ts file from 'node_modules/ngx-google-places-autocomplete/objects/options/options' folder. Like this:

  export declare class Options {

        bounds?: LatLngBounds;

        componentRestrictions?: ComponentRestrictions;

        types?: string[];

        fields?: string[];

        strictBounds?: boolean;

        origin?: LatLng;

        constructor(opt?: Partial<Options>);
  }

It's worked for me!

I don't think this is the right approach

[finitekaren]

add ? within all items of Options class in options.d.ts file from 'node_modules/ngx-google-places-autocomplete/objects/options/options' folder. Like this:

  export declare class Options {

        bounds?: LatLngBounds;

        componentRestrictions?: ComponentRestrictions;

        types?: string[];

        fields?: string[];

        strictBounds?: boolean;

        origin?: LatLng;

        constructor(opt?: Partial<Options>);
  }

It's worked for me!

highly discourage this because there's rarely a situation where it's ok to edit source files. node files aren't usually committed to a repo (file size is large and only needs to be on your computer so they're usually excluded - see .gitignore file) so if another person pulls the repo, they will not have the changes you made to the source file

[Cuhadari-Deniz]

Use this:

options: Options = new Options({
    types: ['address'],
    componentRestrictions: { country: 'CA' }
  });

There are two changes:

1. If you use new Options() you are able to pass a Partial\<Options> Object, so you can only define the params you want to. (Learn more about Partials here)
2. The country field is of type string. It does not accept a string array. Therefore you can only enter one country.

[JeromeRioux]

Use this:

options: Options = new Options({
    types: ['address'],
    componentRestrictions: { country: 'CA' }
  });

There are two changes:

1. If you use new Options() you are able to pass a Partial Object, so you can only define the params you want to. (Learn more about Partials here)
2. The country field is of type string. It does not accept a string array. Therefore you can only enter one country.

But why can it only be a string? Google places accept an array for up to 5 countries.