Initial value for mat-select from within template

Question

How do you pass an initial value to a mat-select, from within a template.

This snippet is within an ngFor so I cannot set the value from the component, only the template!

  /** Compare two status' to see if they are the same */
  compareStatus(obj1, obj2){
    console.log(obj1, obj2);
    return (obj1 && obj2) ? obj1.status === obj2.status : false;
  }

<mat-form-field>
  <mat-select placeholder="Status"
    [formControl]="statusForm"
    floatLabel="never"
    name="status"
    [value]="{status: booking.status}"
    [compareWith]="compareStatus"
    id="status">
    <mat-option [value]="{ status: null, booking: booking._id }">
	    No Status
    </mat-option>
    <mat-option [value]="{ status: 'checked', booking: booking._id }">
	    Checked In
    </mat-option>
    <mat-option [value]="{ status: 'paid', booking: booking._id }">
	    Paid
    </mat-option>
    <mat-option [value]="{ status: 'ticket', booking: booking._id }">
	    Ticket
    </mat-option>
    <mat-option [value]="{ status: 'voucher', booking: booking._id }">
	    Voucher
    </mat-option>
    <mat-option [value]="{ status: 'dna', booking: booking._id }">
	    Did Not Attend
    </mat-option>
  </mat-select>
</mat-form-field>

the console.log always shows obj2 as null so I don't think the value is being properly set on the select

Thanks for your help in advance!

P.S. It's a bad idea for an option to be a JavaScript object. And do you have a Stackblitz demo? — Edric
works fine for me, why is it a bad idea ? plus they use objects in the angular material demos — Nicholas Foden

G. Tranter G. Tranter · Accepted Answer · 2018-08-01T13:58:26

You shouldn't use a FormControl and use value either to initialize (as you have done) or to bind. To initialize the select value, set in on the FormControl:

<mat-select placeholder="Status"
    [formControl]="statusForm"
    floatLabel="never"
    name="status"
    [compareWith]="compareStatus"
    id="status">

TS:

statusForm = new FormControl({status: booking.status});

Initial value for mat-select from within template

2 Answers