AnsweredAssumed Answered

How to find valid Angular exported members?

Question asked by jamesmjones00123 on May 20, 2018
Latest reply on May 21, 2018 by agup-esristaff

I'm trying to add a Search widget to the base Esri Angular example.  Essentially trying to combine: 

 

GitHub - Esri/angular-cli-esri-map: Example Angular component for building mapping applications with the ArcGIS API for … 

with

ArcGIS API for JavaScript Sandbox  

 

to add a search widget in the Angular example. Within esri-map.components.ts I have this (my additions in bold below). Compile error is: Namespace '__esri' has no exported member 'SearchWidgetProperties'.  I realize this may be an Angular question but how can I see a list of valid exported entities?  And how would I hook up the search widget to the map in this context? Thanks for any help getting me pointed in the right direction.

 

esri-map-components.ts:

.....
public ngOnInit() {
loadModules([
'esri/Map',
'esri/views/MapView',
'esri/widgets/Search',
])
.then(([EsriMap, EsriMapView, EsriSearch]) => {

// Set type for Map constructor properties
const mapProperties: esri.MapProperties = {
basemap: this._basemap
};

let map: esri.Map = new EsriMap(mapProperties);
// Set type for MapView constructor properties
const mapViewProperties: esri.MapViewProperties = {
  container: this.mapViewEl.nativeElement,
  center: this._center,
  zoom: this._zoom,
  map: map
};

let mapView: esri.MapView = new EsriMapView(mapViewProperties);
let searchWidget: esri.Search = new EsriSearch();
const searchWidgetProperties: esri.SearchWidgetProperties = {
  view : mapView
};

mapView.ui.add(searchWidget, {
  position: 'top-right'
});
mapView.when(() => {
  // All the resources in the MapView and the map have loaded. Now execute additional processes
  this.mapLoaded.emit(true);
}, err => {
  console.error(err);
});
})
.catch(err => {
console.error(err);
});
} // ngOnInit

Outcomes