Limiting search result to country using ArcGIS API for JavaScript integrated with Angular

Question

I want to restrict my search results to a specific country (NZ) with ArcGIS Javascript/Angular API. I am using Angular for this project:

mygis.component.ts

async ngOnInit() {
await loadCss('https://js.arcgis.com/4.9/esri/css/main.css');
const [WebMap, MapView, _, Search, Locator] = await loadModules([
  'esri/Map',
  'esri/views/MapView',
  'esri/WebMap',
  'esri/widgets/Search',
  'esri/tasks/Locator'
])
// create a Map loaded from a webmap
const webMap = new WebMap({
  basemap: 'hybrid',
  portalItem: { // autocasts as new PortalItem()
    id: "f2e9b762544945f390ca4ac3671cfa72"
  }
});

const search = new Search({
  mapView: MapView,
  includeDefaultSources: false,
  sources: [{
    locator: new Locator({ url:"https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"}),
    CountryCode: "NZ"}],
    name: "Geocode",
});

const mapView = new MapView({
      container: this.mapView,
      center: [175.1278, -36.7074],
      zoom: 9,
      map: webMap,
    });

mapView.ui.add(search, "top-right");
  
  }
}

I have created a stackblitz sample here but I get world wide results. Very similar to Limiting the search widget results to a country in ArcGIS JS API 4.9.

Answer 1

You just have a small typo in your code - you have CountryCode (first capital C), instead of countryCode

const search = new Search({
  mapView: MapView,
  includeDefaultSources: false,
  sources: [{
    locator: new Locator({ url:"https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"}),
    countryCode: "NZ"}],
    name: "Geocode",
});