mat-select binding with two columns

Issue

I've a list of products and I'm trying to bind two bind with two columns.

HTML:

<mat-form-field appearance="outline">
  <mat-label>Product</mat-label>
  <mat-select formControlName="pid">
    <mat-option value="">-all-</mat-option>
    <mat-option *ngFor="let row of ds.listProduct" [value]="row.code"> 
     {{row.name}}
    </mat-option>
  </mat-select>
</mat-form-field> 

The below code it is working, but I want to bind one column more, like this:

[value]="row.code" && myCategory="row.category"

myCategory is a variable in my TS.

Is it possible and how can I get it?

Solution

You can add the other field in the same [value] using the && operator if you want both the conditions to be true

Since you want to display mat-option only for category FUEL. You'll have to use *ngIf to hide the rest of the options.

We'll have to move our *ngFor to <ng-container> as we cannot have multiple template bindings on a single container. To help us add *ngIf on mat-option.

Your code should look something like this:

<mat-form-field appearance="outline">
   <mat-label>Product</mat-label>
   <mat-select formControlName="pid">
     <mat-option value="">-all-</mat-option>
     <ng-container *ngFor="let row of ds.listProduct">
        <mat-option [value]="row.code" *ngIf="row.category === 'FUEL'"> 
           {{row.name}}
        </mat-option>
     </ng-container>
   </mat-select>
 </mat-form-field> 

Note I used row.category === 'FUEL' in the *ngIf, you can use the myCategory instead of FUEL if you are setting in the .ts component

Answered By - HassanMoin