title: Angular - Bind Dropdown or select to API (database)
body: <p>I was on a project with Angular and a backend.</p>
  <p>If I enter a list in the ts file:</p>
  <pre><code>this.towns = [{
         code: '1',
         label: 'Paris'
     },
     {
         code: '0',
         label: 'Vancouver'
     }
   ];
  </code></pre>
  <p>I can display them in my html but not if I try to connect to a db:</p>
  <pre><code>&lt;select  class=&quot;selectpicker dropdown mt-4 ml-3&quot; id=&quot;town&quot;&gt;
     &lt;option *ngFor=&quot;let town of towns&quot; [value]=&quot;town.id&quot;&gt;{{town.name}}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  <p>In my ts file, I tried:</p>
  <pre><code>export class TestComponent implements OnInit {
   
    form: FormGroup;
    towns: { id: number, name: string }[];
   
    constructor(
      private http: HttpClient
    ) { }
   
    towns: Town[];
    apiUrl = 'https://localhost:8000/api/';
   
    ngOnInit(): void {
      this.form = new FormGroup({
        town: new FormControl()
      });
      this.getTown();
    }
   
    onClickTown(): Observable&lt;any&gt; {
      console.log(this.form)
      return this.http.get(this.apiUrl + 'towns')
    }
   
    getTown() {
      this.http.get&lt;any[]&gt;(this.apiUrl + 'towns')
        .subscribe(data =&gt; {
          this.towns = data;
          console.log(data)
        });
    }
   
    postData() {
      console.log(&quot;data&quot;);
      this.http.post&lt;any[]&gt;(this.apiUrl, {}).
        subscribe(
          (data: any[]) =&gt; {
            // console.log(data);
          }
        )
    }
  </code></pre>
  <p>Did I forget a step?
  Thanks</p>