how to set default value to a mat form field with mat select

Question

How do we set a default value to a mat select when it first loads, for example I have a select menu with checkbox below when it load I want transaction type idle dispo checked and selected by default. Thanks for any ideas and help.

The default selected of the transaction type form field should be Idle Disposition

this.filters.transactionType value

[
    {
        "id": 3,
        "name": "Idle Disposition"
    }
]

html code

<div class="report-select-container">
            <mat-form-field appearance="fill" class="full-width">
                <mat-label>Transaction Type</mat-label>
                <mat-select 
                  multiple
                  #selectElemTransactionTypes
                  [(value)]="reportFilter.transactionType"
                  (selectionChange)="changeFilter('transactionType',selectAllTransactionTypes)"> `
                  <div class="idle-report-select-all-container">
                    <mat-checkbox
                      #selectAllTransactionTypes
                      color="primary"
                      (click)="toggleAllSelectionFilter('transactionType',selectElemTransactionTypes, selectAllTransactionTypes)">
                        Select All
                    </mat-checkbox>
                  </div>
                  <mat-option *ngFor="let f of filters.transactionType" [value]="f.name">
                    {{f.name}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
        </div>

.tscode

changeFilter(filterName:string, selectAll: MatCheckbox){    
    this.isAllSelected[filterName] = (this.reportFilter[filterName].length === this.filters[filterName].length);
    this.payloadFilter[filterName] = JSON.stringify(this.reportFilter[filterName]);
    selectAll.checked = this.isAllSelected[filterName];
  }

toggleAllSelectionFilter(selectProp: string, selectElem:MatSelect, selectAll: MatCheckbox) {    
    let isSelectAllSelected = this.isAllSelected[selectProp];
    const checkSelAllOption = !isSelectAllSelected;
    selectElem.options.forEach((item: MatOption) => (checkSelAllOption)? item.select(): item.deselect());
    this.isAllSelected[selectProp] = checkSelAllOption;   
    setTimeout(()=>{
      selectAll.checked = checkSelAllOption;
    },0)    
  }

Answer 1

To be honest I don't see where "Idle Disposition" checkbox is on your template.

But we can use (checked) to check it. https://material.angular.io/components/checkbox/api

@Input()
checked: boolean

Adding this to your template should work.

<mat-checkbox
  (checked)="filters.transactionType['name'] == 'Idle Disposition'">
</mat-checkbox>

I would suggest to introduce some other property by which you evaluate if default state is checked or not.

{
    "id": 3,
    "name": "Idle Disposition",
    checked: true
}

After wards you would use it like so:

<mat-checkbox
  (checked)="filters.transactionType.checked">
</mat-checkbox>

Answer 2

You should add a [(ngModel)] to your mat-select .Lets call it selectedTransaction .

Then in your .ts component, you should initialized selectedTransaction with the default value you want to have. Which is:

    {
        "id": 3,
        "name": "Idle Disposition"
    }

Then in your HTML where you have mat-select , it has another property called compareWith which you can assign to it to compare the selected value with the values available in the mat-select. If your criteria match that selected value will be displayed, so a the bare minimum your <mat-select> would look like this.

  <mat-select 
      [(ngModel)]="selectedTransaction" 
      [compareWith]="compareSelectOptions" multiple>

And lastly in your .ts component you create a function called compareSelectOptions which matches the selected value and the values available in mat-select

compareSelectOptions(a: any, b: any) {
   if (a !== undefined && b !== undefined) {
       //Note the equation here can be changed depending upon what you are saving
       return a.id === b.id
   };
  }