How to find valid Angular exported members?

1270
1
05-20-2018 09:19 AM
JJones
by
New Contributor

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... 

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
Tags (2)
0 Kudos
1 Reply
AndyGup
Esri Regular Contributor

Hi James, 

>>  I realize this may be an Angular question but how can I see a list of valid exported entities? 

Looks like you have a typescript question, but in general for questions about 3rd party framework integration it's best to post questions directly on the respective github repos. 

You can use an IDE like VS Code and it will show the exported members via intellisense. Here's a link for more info.

If you have doubts and want to double check the definitive source you can go directly to our  `d.ts` file and control-F for the name: https://raw.githubusercontent.com/Esri/jsapi-resources/master/4.x/typescript/arcgis-js-api.d.ts 

>> And how would I hook up the search widget to the map in this context? 

There are several options. Option A - remove the reference to "esri.SearchWidgetProperties" because there isn't one. Option B - replace it with type "any", or Option C - you could create your own interface to enforce which properties are valid.