CODEWITHSUNDEEP
angularangular-materialangular-material2
P.S.
P.S.

Reputation: 16384

Angular 2 Material `md-select` with custom template

I'm searching the way to use custom template for Angular 2 material's md-select, but it seems like I can use only default text selection. I'm trying to implement a dropdown like this:

enter image description here

I need to have such template in md-options and in md-select after selection one of my md-options. Is there a way to get the following result via Angular 2 material's md-select?

Upvotes: 1

Views: 1916

Answers (2)

Simon_Weaver
Simon_Weaver

Reputation: 145880

This is same as @Kamil's answer but cleaned up a bit. I'm also using flex-layout for flexbox directives.

  <mat-option class="customer-search-result"
              *ngFor="let option of searchResults" [value]="option">

       <div fxLayout="column">

           <span class="name">{{ option.fullName }}</span>
           <span class="email">{{ option.email }}</span>

       </div>

   </mat-option>

And the sass

mat-option.customer-search-result
{
    line-height: normal;

    .name {
        font-weight: bold;
    }

    .email {
        color: gray;
    }
}

Be sure to do mat-option and not .mat-option so you don't need to worry about shadow DOM.

Note that there is a <span class='mat-option-text'> inserted which you may need to restyle too.

Upvotes: 3

Kamil Kuryś
Kamil Kuryś

Reputation: 62

I just came across the same problem. It seems that content works as expected but it's just the mat-option that doesn't want to resize automatically. The solution that worked for me is just to transclude divs with your desired content into and specify mat-option height. Possiblt you'd also like to modify line-height Like this:

 <mat-form-field>
    <input type="text" placeholder="Select" aria-label="subject" matInput formControlName="subjectInput" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let item of items | async" style="height: 60px; line-height: normal;">
       <!-- your content here -->
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

Upvotes: 2

Related Questions