I am trying to use autocomplete component from material here is my
HTML
<md-input-container>
<input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let state of filteredStates | async" [value]="state">
{{ state }}
</md-option>
</md-autocomplete>
xyz.component.ts
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import 'rxjs/add/operator/startWith';
@Component({
moduleId: module.id,
selector: 'importer',
templateUrl: 'importer.html',
styleUrls: ['importer.scss']
})
export class ImporterComponent {
stateCtrl: FormControl;
filteredStates: any;
states = [
'Alabama',
'Alaska',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Connecticut',
'Delaware',
'Florida',
'Georgia',
'Hawaii',
'Idaho',
];
constructor() {
this.stateCtrl = new FormControl();
this.filteredStates = this.stateCtrl.valueChanges
.startWith(null)
.map(name => this.filterStates(name));
}
filterStates(val: string) {
return val ? this.states.filter(s => new RegExp(`^${val}`, 'gi').test(s))
: this.states;
}
}
I am unable to see any autocomplete. I have no errors in code. I have no errors in console and no errors in terminal but when I refresh my page I am not seeing anything. The page is not loading for me. just a blank page. I am not sure how to figure it out. I have seen that previously it was under development but now as they have made it available on the site as a component I am sure it should work. I need to know if I am missing something.