Help With Angular Service

03-26-2020 10:16 AM
New Contributor III

I am a beginner with the angular framework. I need to populate a drop in my component. The elements will come from a feature layer. The drop down needs be populated in the beginning to work or I guess I could subscribe to a method. I created a service that should return a promise so and on the element I believe I am subscribing to the method. However I am having issues with returning a promise in the service. Can you guys tell me how I should change the service to return the promise I need or if there is a better way to do it? I am using Angular 9, and the esri loader I think it is the latest because I used the command

npm install --save esri-loader 

to install it, although my package.json lists the 2.13.0 version. Thank you for any help!

The Component:

  selector: 'app-esri-map',
  templateUrl: './esri-map.component.html',
  styleUrls: ['./esri-map.component.css']

export class EsriMapComponent implements OnInit {

   // this is needed to be able to create the MapView at the DOM element in this component
   @ViewChild('mapViewNode', { static: true })  mapViewElElementRef;

//  @ViewChild('economicimpactfactorsselect', { static: false }) economicimpactsselect: ElementRef;
  constructor(private esriMapServiceEsriMapService) { }

  public ngOnInit() {

    this.esriMapService.loadMap(this.mapViewEl).then(attrarray => this.attributesarray = attrarray)
  } // ngOnInit


The Service:

import {ElementRefInjectableViewChildfrom '@angular/core';
import { loadModules } from 'esri-loader';
import esri = __esri;

export class EsriMapService {

  constructor() { }

  loadMap(mapContainerElementRef) {
    const promise = new Promise((resolvereject=> {
        .then(([EsriMapEsriMapViewFeatureLayer]) => {

          let mapesri.Map = new EsriMap({
            basemap: 'hybrid'
          const economicimpactLayer = new FeatureLayer({
            url: '//',
            outFields: ["*"],
            id: "economicimpactLayer"
          let mapViewesri.MapView = new EsriMapView({
            container: mapContainer.nativeElement,
            center: [-99.531.2],
            zoom: 6.5,
            map: map
          mapView.when(() => {
            return economicimpactLayer.when(function() {

                let values = [];
                               for (let i = 0i < economicimpactLayer.fields.lengthi++) {
                                return values
          }, err => {

          function getValues(response) {
            let array = [];
            for (let i = 0i < response.lengthi++)
           array.push({name: response[i]});
             this.attributesarray = array.slice();
        .catch(err => {

    return promise;

And the html:

<div class="container">
    <div class="row">
      <div class="column-12">
          <h5>Summary Tool (click one of the buttons below to start)</h5>
          <select name="economicimpactfactorsselect" id="economicimpactfactorsselect" >
             <option value="" selected>

            <option *ngFor="let attribute of attributesarray let i = index;" value={{i}}>{{}}</option> 

      <div class="column-12">

<div #mapViewNode></div>
0 Kudos
0 Replies