md-autocomplete angular2 getting data from server shows empty dropdown on focus (but fills when first typing)

Question

I'm getting data from an Angular2 service and trying to put in the autocomplete component. When the user focus the autocomplete component, the dropdown opens empty, but when user types something, the dropdown shows the result.

I want to show all data in the moment the autocomplete as focused, not only after the first typing.

My template is:

<md-input-container>
    <input mdInput [mdAutocomplete]="auto" [formControl]="myCtrl">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete">
    <md-option *ngFor="let item of filteredItems | async" [value] = "item.name">
        {{item.name}}
    </md-option>
</md-autocomplete>

And my component is:

import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs/Observable';

import {MyService} from '../services/my.service';

import {ItemInterface} from '../model/item-interface';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
 })
 export class TestComponent implements OnInit {

 myCtrl: FormControl;
 filteredItems: Observable<ItemInterface[]>;

 items: ItemInterface[] = [];
 errorMessage:any = '';

 constructor(private myService: MyService) {

   this.myCtrl = new FormControl();
   this.filteredItems = this.myCtrl.valueChanges
                                    .startWith(null)
                                    .map(i => i && i === 'object' ? i.name : i)
                                    .map(name => name ? this.filterItem(name) : this.items.slice());

  }

  ngOnInit() {
    this.myService.getItems()
                    .subscribe(
                      items => this.items = items,
                     error => this.errorMessage = error
                  );
 }


 filterItems(name: string) {
   return this.items.filter(option => new RegExp(`^${name}`, 
'gi').test(option.name));
 }
} 

Answer 1

I think if you move your myCtrl code inside the callback, that should solve the problem.

I tested it with some sample code in this plunker and it's working.

ts:

constructor(private dataService: DataService) {
  this.myCtrl = new FormControl();
}

ngOnInit(){
  this.dataService.fetchData()
    .subscribe(
      (data) => {
        this.items = data.customers;
        this.filteredItems = this.myCtrl.valueChanges
          .startWith(null)
          .map(i => i && i === 'object' ? i.name : i)
          .map(name => name ? this.filterItem(name) : this.items.slice());

    }
);