-1

I am trying to implement a dropdown, that would have a header with 3 columns(ID, Model, Description). I know how to do a simple dropdown using mat-select,

 <mat-select>
    <mat-option> a </mat-option>
    <mat-option> b </mat-option>
    <mat-option> c </mat-option>
  </mat-select>

However, I got no clues on how to make a more complex dropdown, Can someone give me a direction on how to approach this? Thank you!
Click the arrow, the dropdown will show

zhinee
  • 105
  • 1
  • 10
  • 1
    You supply a link to a hand drawn dropdown, no code, very little to go on, and you ask for a *hint*. Here's a hint: https://stackoverflow.com/help/how-to-ask. – R. Richards Jan 07 '21 at 17:46
  • Hi Richard, I did not mean to provide no codes, but I do not even know how to start to implement a customized dropdown. That's why I am asking fo a direction on how to approach it . – zhinee Jan 07 '21 at 18:03

1 Answers1

1

it's not an "easy", Some time ago I made some like you want but using ng-bootstrap as base (it's is this github ). Making using material angular need the use of

  1. a Mat-Input (read only)
  2. a Mat-Menu (to simulate the "dropdown") -really I don't know why material angular has no a dropdown-
  3. a Mat table

So you need some like

<input matInput (focus)="..." (blur)="..." (keydown)="...">
<mat-menu #menu="matMenu">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    ...
    </table>
</mat-menu>

Good luck and happy coding!

NOTE: if we need that a matmenu don't close you can use some like this SO

<mat-menu #appMenu="matMenu">
    <div (click)="$event.stopPropagation()">
        ..here what you want..
    </div>
</mat-menu>
Eliseo
  • 50,109
  • 4
  • 29
  • 67