title: Angular not displaying data from component.ts to html
body: <p>I'm trying to display the offices to a dropdown select element. I've checked/validated that my api is returning the correct data. However in my angular component (ts and html) file, I was not able to display it.</p>
  
  <p>model file</p>
  
  <pre><code>export interface Office {
    id: string;
    name: string;
    sections: Array&lt;Sections&gt;;
  }
  
  export interface Sections {
    id: string;
    name: string;
    code: string;
  }
  </code></pre>
  
  <p>service file</p>
  
  <pre><code>getOffices() {
    return this.http.get&lt;{offices: Office[]}&gt;(`${BACKEND_URL}`);
  }
  </code></pre>
  
  <p>component file</p>
  
  <pre><code>offices: Office[] = [];
  
  constructor(public officesService: OfficesService) {}
  
    ngOnInit() {
  
      return this.officesService.getOffices().subscribe((officesData: {offices: Office[]}) =&gt; {
        this.offices = officesData.offices;
      });
  
    }
  
  //at this point I can see from my browser Network tab the offices preview and the data are correct
  </code></pre>
  
  <p>html file</p>
  
  <pre><code>&lt;mat-select name="office" placeholder="Office" #officeInput="ngModel" matInput ngModel required&gt;
    &lt;mat-option *ngFor="let office of offices" value=""&gt;{{ office.name }}&lt;/mat-option&gt;
  &lt;/mat-select&gt;
  </code></pre>