How to create a dropdown in angular material with table like content-CodePudding

I'm a newbie to angular material and I'm trying to develop the dropdown (Select) with content that has a table like structure.

For example dropdown will contain list of city objects {id: 1, name: Bangalore, peopleCount: 8425970, id: 2, name: x, peopleCount: y} and I want dropdown option to look like a table with columns for id, city name and peopleCount.

I also want it to be a multi select dropdown

<mat-form-field appearance="fill">
  <mat-label>Cities</mat-label>
  <mat-select [formControl]="cities" multiple>
    <mat-option *ngFor="let city of cities" [value]="city.id">
//   pseudoCode:
//   <column label = "id">{{city.id}} <column>
//   <column label = "name">{{city.name}} <column>
//   <column label = "People count">{{city.peopleCount}} <column>
   </mat-option>
  </mat-select>
</mat-form-field>

More or else I want it to look like this, but with labels as a first row

enter image description here screen is taken from here: https://www.grapecity.com/wijmo/demos/Input/ComboBox/Multi-column/angular

Thanks in advance for your help!

I ve tried to search for an answer through internet however didnt manage to find anything on this case.

CodePudding user response：

As per my understanding .You need to make a table first than use *ngFor on that. inside a table you can use column as you used inside mat select.

CodePudding user response：

This would be the most simple solution, of course you need to modify it a bit, but all required logic is there.

HTML template:

<mat-option>
  <div >
    <div >{{city.id}}</div>
    <div >{{city.name}} </div>
    <div >{{city.peopleCount}}</div>
    <div >amount</div>
  </div>
</mat-option>

CSS:

.row {
  display: flex;
}

.col {
  width: 200px;
  text-align: center;
}

.col:nth-child(1) {
  text-align: start;
}