Angular Material 2 - Custom mat-option/md-option template in autocomplete

user_5225620 0
Viewed 12262

Does Angular Material 2 have a selector to customize autocomplete options like Angular Material md-item-template for AngularJS? I couldn't find anything on the docs from Material 2

AngularJS example from the docs:

<md-autocomplete
    <md-item-template>
      <span class="item-title">
        <md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
        <span> {{item.name}} </span>
      </span>
      <span class="item-metadata">
        <span class="item-metastat">
          <strong>{{item.watchers}}</strong> watchers
        </span>
        <span class="item-metastat">
          <strong>{{item.forks}}</strong> forks
        </span>
      </span>
    </md-item-template>
</md-autocomplete>

enter image description here

angular-material angular autocomplete
3 Answers

I am also searching for the right way to do it like good 'ol Material 1. This is ugly hack I could get it to work in Material 5:

Style:

.mat-option {
  height: 50px;
  line-height: 20px;
}

Template:

<mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
    <!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
        <span>{{ state.name }}</span><br>
        <small>Population: {{state.population}}</small>         
    </mat-option>
</mat-autocomplete>

Try it here

user_13939490

Here is what I did to have a multiline option in mat-autocomplete.
For me, the key was to wrap the mat-option content in a div and set display to inline-block.
Maybe someone find it useful.

Template

<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let item of filteredItems" [value]="item">
    <div class="multiline-option">
      {{ item.lineOne }} <br />
      {{ item.lineTwo }}
    </div>
  </mat-option>
</mat-autocomplete>

Style

.multiline-option {
  display: inline-block;
  line-height: normal;
}
user_131233790
Related