Angular Material mat-select how to know object name (selectionChange)

Question

I have two mat-select like this

<mat-form-field>
        <mat-select formControlName="Source" required placeholder="Source" (selectionChange)="change($event)"  [disabled]="!enabled">
          <mat-option *ngFor="let system of apiEntitySyncViewModel.Systems" value="{{system.Value}}">{{system.Text}}</mat-option>
        </mat-select>
        <mat-error>This field is mandatory</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-select formControlName="Destination"  placeholder="Data Destination" (selectionChange)="change($event)" [disabled]="!enabled">
          <mat-option *ngFor="let system of apiEntitySyncViewModel.Systems" value="{{system.Value}}">{{system.Text}}</mat-option>
        </mat-select>
      </mat-form-field>

In my .ts I do some validation... If both have a different value from 0.. a function is fired. That is why I have the same funcion name on (selectionChange) event

here is my function..

change( ob:MatSelectChange) {
  var source=this.form.value["Source"];
  var destination=this.form.value["Destination"];
  if(source=="0" || destination=="0")
    return;
  this.getWorkflowItems();
}

What I would like to do, is to capture the Name of the object that was clicked.

I can reach that adding and extra parameter (selectionChange)="change($event,'objName')" . But I would like to know if I can have it using $event parameter...

Thanks

Answer 1

Instead of value="{{system.Value}}" pass the whole object:

      <mat-form-field>
       <mat-select formControlName="Source" required placeholder="Source" 
                   (selectionChange)="change($event)" [disabled]="!enabled">
          <mat-option *ngFor="let system of apiEntitySyncViewModel.Systems"
                       value="{{system}}">
                {{system.Text}}
          </mat-option>
        </mat-select>
        <mat-error>This field is mandatory</mat-error>
      </mat-form-field>
      .
      .

And in the .ts file:

change(ob: MatSelectChange) {
  const source = this.form.value["Source"];
  console.log(source.Value)
  console.log(source.Text)
  .
  .
}