title: How to set default values for mat autocomplete
body: <p>I have multiple auto complete on a page and able to select values and save them. What I need is when I load the page next time, the pre selected values should be displayed by default for the ones already selected and saved.</p>
  
  <p>Following is the code snippet -</p>
  
  <pre><code>&lt;ng-container matColumnDef="course"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Course Section &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let course"&gt; {{course.courseSection}}
        &lt;mat-form-field&gt;
            &lt;input type="text" id="{{course.courseSection}}" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl"
              [matAutocomplete]="auto"&gt;
            &lt;mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectionChanged(course.courseSection, $event)"&gt;
              &lt;mat-option *ngFor="let option of filteredOptions | async" [value]="option"&gt;
                {{option}}
              &lt;/mat-option&gt;
            &lt;/mat-autocomplete&gt;
          &lt;/mat-form-field&gt;
        &lt;/td&gt;
      &lt;/ng-container&gt;
  </code></pre>
  
  <p>On ngOnInit, I am able to get the values saved in a map and was using the below logic which doesn't work -</p>
  
  <pre><code>checkAssigned(section: string) {
      if (this.assigned.has(section)) {
        return this.assigned.get(section);
      } else {
        return '';
      }
  } 
  </code></pre>
  
  <p>Html -</p>
  
  <pre><code>&lt;mat-option *ngFor="let option of filteredOptions | async" 
  [value]="checkAssigned(course.courseSection)===''? option : checkAssigned(course.courseSection)"&gt;
  </code></pre>
  
  <p>But it doesn't work. Any suggestions as how can I achieve it?</p>
  
  <p><a href="https://i.stack.imgur.com/zZUJL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zZUJL.png" alt="enter image description here"></a></p>