title: Preselecting multiple values for mat-select - Angular 6
body: <p>I'm trying to preselect multiple options in a mat-select. So far I'm not able to achieve this.</p>
  
  <p>Here is the HTML file:</p>
  
  <pre><code>&lt;mat-dialog-content [formGroup]="form"&gt;
     &lt;mat-form-field&gt;
       &lt;mat-select placeholder="participants" formControlName="participants"  multiple&gt;
           &lt;mat-option *ngFor="let participant of participants" [value]="participant"&gt;{{participant}}&lt;/mat-option&gt;
       &lt;/mat-select&gt;
      &lt;/mat-form-field&gt;
  &lt;/mat-dialog-content&gt;
  </code></pre>
  
  <p>Here is the controller:</p>
  
  <pre><code>export class EventViewModalComponent implements OnInit {
    form: FormGroup;
    calendarEvent: CalendarEvent;
    participants = [];
  
    constructor(private fb: FormBuilder,
      private participantService: ParticipantService,
      @Inject(MAT_DIALOG_DATA) event: CalendarEvent) 
      { 
      this.form = fb.group({
        title: [event.title, Validators.required],
        location: [event.meta.location, Validators.required],
        description: [event.meta.description, Validators.required],
        start: [event.start, Validators.required],
        end: [event.end, Validators.required],
        participants: [this.participants, Validators.required]
      });
      this.calendarEvent = event;
    }
  
    ngOnInit() {
      this.participantService.getAll().subscribe(data =&gt;{
        for(let i = 0; i &lt; data['length']; i++){
          this.participants.push(data[i]['name']);
        }
      })
    }
  }
  </code></pre>
  
  <p>This currently selects all the values per default. Here's a screenshot of how it looks currently:
  <a href="https://i.stack.imgur.com/fzqYn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fzqYn.png" alt="enter image description here"></a></p>
  
  <p><strong>What I'm trying to achieve is having only Cindy and Jim preselected like this:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/vkEyv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vkEyv.png" alt="enter image description here"></a></p>
  
  <p>How can I achieve this? I've read through several SO questions and wasn't successful. Any help is appreciated </p>