title: Display Angular drop down list from Java HashMap
body: <p>I want to display HashMap in Angular app using GET request from Spring Application. I tried this:</p>
  
  <p>Spring code:</p>
  
  <pre><code>@GetMapping("gateways")
  public ResponseEntity&lt;?&gt; getGateways() {
      Map&lt;Integer, String&gt; list = new HashMap&lt;&gt;();
      list.put(1, "Bogus");
      return ok(list.put);
  }
  </code></pre>
  
  <p>Angular Service:</p>
  
  <pre><code>getContractGatewaysList(): Observable&lt;Array&lt;ContractGatewaysList&gt;&gt; {
      return this.http.get&lt;Array&lt;ContractGatewaysList&gt;&gt;(environment.api.urls.contracts.getContractGateways);
    }
  </code></pre>
  
  <p>Angular component:</p>
  
  <pre><code>gateways: ContractGatewaysList[];
  
  this.contractService.getContractGatewaysList()
        .subscribe(value =&gt; {
          if (value != null) {
            this.gateways = value;
          }
        });
  </code></pre>
  
  <p>Interface:</p>
  
  <pre><code>export interface ContractGatewaysList {
    id: number;
    name: string;
  }
  </code></pre>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div class="form-group gateway"&gt;
      &lt;div class="input-group-prepend"&gt;
        &lt;label for="merchant_id"&gt;Gateway&lt;/label&gt;
      &lt;/div&gt;
      &lt;select class="custom-select" name="gateway" [(ngModel)]="contract.gateway" id="gateway" required&gt;
        &lt;option selected&gt;Please Select...&lt;/option&gt;
        &lt;option [value]="gateway.id" *ngFor="let gateway of gateways"&gt;{{ gateway.name }}&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>But I get empty list. What is the proper way to convert the Java Hashmap and display the values in Angular drop down menu? Can you show me working code example, please because I'm stuck with this problem?</p>
  
  <p>I get this error:</p>
  
  <pre><code>ERROR Error: Cannot find a differ supporting object '3873648042962238500' of type 'number'. NgFor only supports binding to Iterables such as Arrays.
      at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3152)
      at checkAndUpdateDirectiveInline (core.js:9246)
      at checkAndUpdateNodeInline (core.js:10507)
      at checkAndUpdateNode (core.js:10469)
      at debugCheckAndUpdateNode (core.js:11102)
      at debugCheckDirectivesFn (core.js:11062)
      at Object.eval [as updateDirectives] (ContractNewComponent.html:50)
      at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054)
      at checkAndUpdateView (core.js:10451)
      at callViewAction (core.js:10692)
  </code></pre>