title: Drop down does not populate with API data in Angular
body: <p>I want to retrive data to dropdown from api and I don't know what is wrong in my code. </p>
  
  <p><strong>Result of API</strong>:</p>
  
  <pre><code>[{"projectId":2,"projectName":"test","gates":[]},{"projectId":3,"projectName":"project1","gates":[]}]
  </code></pre>
  
  <p>Model of service(<strong>project.ts</strong>) :</p>
  
  <pre><code>export class Project{
      projectName: string;
      projectId :number;
  }
  </code></pre>
  
  <p>Dropdown in my <strong>sidebar.component.html</strong>:</p>
  
  <pre><code>&lt;div class="dropdown  ml-auto"&gt;
      &lt;select (change)=selectedHandlerProjectName($event) class="btn btn-secondary dropdown-toggle" style="margin-left: -10px;border-left-width:15px;padding-left:11px;padding-right: 14px;margin-right: 12px;border-right-width: 12px"&gt;
          &lt;option value = "default"&gt;Select project&lt;/option&gt;
          &lt;option *ngFor = "let projectName of selectProject?.projectName" value = {{projectName}}&gt;{{projectName}}&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Sidebar.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Project } from '../models/Project';
  import {ProjectService} from '../services/project.service';
  
  @Component({
    selector: 'app-sidebar',
    templateUrl: './sidebar.component.html',
    styleUrls: ['./sidebar.component.css']
  })
  export class SidebarComponent implements OnInit {
  
    selectProject : Project;
    constructor(private projectService: ProjectService) { }
  
    getSelectedProject(): void{  
      this.projectService.getProjects()
        .subscribe(selectProject =&gt; this.selectProject= selectProject);
    }
    //methods to get dropdown values
    dropDownProjectName: string = '';
    selectedHandlerProjectName(event : any)
    {
      if(event.target.value != 'default') { this.dropDownProjectName = event.target.value;}
      else {this.dropDownProjectName = null;}
    }
  
    ngOnInit() {
      this.getSelectedProject();
  
    }
  }
  </code></pre>
  
  <p><strong>Project.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable, of } from 'rxjs';
  import { HttpClient,HttpHeaders } from '@angular/common/http';
  import {catchError,map,tap} from 'rxjs/operators';
  import { Project } from '../models/Project';
  import { environment } from '../../environments/environment';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ProjectService {
  
    private urlProject = environment.baseUrl + environment.urlProject ;
  
    constructor(private http: HttpClient) { }
  
    getProjects(): Observable&lt;any&gt;{
      return this.http.get&lt;Project&gt;(this.urlProject)
      .pipe(
      catchError(this.handleError('getProject',[]))
    );
    } 
  }
  </code></pre>
  
  <p>If i look in Network when app running , appear data from API, but in dropdown not.</p>