angular 2 md-options weird UI behavior with md-autocomplete

Question

following the guide from https://material.angular.io/components/autocomplete I tried to implement autocomplete feature in my app, which needs to fetch autocomplete suggestions from a back end service, all the logic is working fine.But I am completely clueless with some weird UI behavior of md-options.Instead of showing the options below the input field, the options are shown at the bottom of the page. please refer screen shot.Any ideas for the reason behind this and how to fix it.

my component.ts:

private searchTerms = new Subject<string>();

// Push a search term into the observable stream.
search(term: string): void {
  this.searchTerms.next(term);
}

private userNameField: FormControl = new FormControl();

private filteredUsers: Observable<any[]>;

   ngOnInit() {

      this.userNameField.valueChanges
         .startWith(null)
         .forEach(term => {
             if(!this.utils.isEmptyString(term)) {
                this.search(term);
             }
        });

        this.filteredUsers = this.searchTerms
        .debounceTime(300)        // wait 300ms after each keystroke before considering the term
        .distinctUntilChanged()   // ignore if next search term is same as previous
        .switchMap(term => term   // switch to new observable each time the term changes
          // return the http search observable
          ? this.userService.searchUser(term)
          // or the observable of empty heroes if there was no search term
          : Observable.of<any[]>([]))
        .catch(error => {
          // TODO: add real error handling
          console.log(error);
          return Observable.of<any[]>([]);
        });

         this.filteredUsers.subscribe(
            function (x) {
                console.log('Next: ' + x.toString());
            },
            function (err) {
                console.log('Error: ' + err);
            },
            function () {
                console.log('Completed');
            });
   }

my template.html:

<form class="example-form">
    <md-form-field class="example-full-width">
      <input name="userName" type="text" placeholder="Search user by name, email or mobile"
             mdInput [formControl]="userNameField" [mdAutocomplete]="auto">
      <md-autocomplete #auto="mdAutocomplete">
        <md-option *ngFor="let user of filteredUsers | async" [value]="user.name">
          {{ user.name }}
        </md-option>
      </md-autocomplete>
    </md-form-field>

Answer 1

spent few time and finally came to know that I needed to add material Style sheet to my index.html:

    <!-- angular material style sheet -->
<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">,

now everything working perfectly , :)