0

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.

Heretic Monkey
  • 10,498
  • 6
  • 45
  • 102
Sami
  • 1,001
  • 3
  • 16
  • 31
  • Did you import the AutocompleteModule? – developer033 Apr 26 '17 at 20:03
  • 1
    In the Appmodule I am using this import { MaterialModule } from '@angular/material'; import 'hammerjs'; – Sami Apr 26 '17 at 20:05
  • 1
    MaterialModule is being deprecated you should import each module.. in your case: AutocompleteModule. Check it [here](https://github.com/angular/material2/blob/master/CHANGELOG.md). – developer033 Apr 26 '17 at 20:06
  • 1
    but other components are working fine like input, buttons, radio buttons etc – Sami Apr 26 '17 at 20:07
  • 1
    Possible duplicate of [Can't bind to 'formGroup' since it isn't a known property of 'form'](http://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form) – Sami Apr 26 '17 at 20:50

0 Answers0