title: How to set value to multiple mat-select in angular 4
body: <p>I have a mat-select with multiple select option (checkbox) in angular 4</p>
  
  <p>in html</p>
  
  <pre><code>  &lt;mat-form-field&gt;
       &lt;mat-select placeholder="Location" [formControl]="toppings"  [(ngModel)]="locSelected" multiple&gt;
                    &lt;mat-option *ngFor="let topping of loc; let i = index" [value]="topping.value"&gt;
                      {{topping.viewValue}}&lt;/mat-option&gt;
                  &lt;/mat-select&gt;
                &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>In ts file</p>
  
  <pre><code> locSelected:Array&lt;string&gt;=[];
          loc= [
          { value: '1', viewValue: 'US' },
          { value: '2', viewValue: 'UK' },
          { value: '3', viewValue: 'Europe' },
          {value:'4',viewValue:'London'},
          {value:'5',viewValue:'France'},
          {value:'6',viewValue:'Italy'},
          {value:'7',viewValue:'Others'} ];
  </code></pre>
  
  <p>I'm getting the selected value from WebAPI result. I have tried using [(ngModel)], but it's not working.</p>
  
  <p>From the WebApi result</p>
  
  <pre><code>if(result.locSelectedValue!="" &amp;&amp; result.locSelectedValue!=null)
   {
     let location=result.locSelectedValue.split(",");
     for(var i=0;i&lt;location.length;i++)
     {
      this.locSelected.push(loc[i]);
     } 
   }
  </code></pre>
  
  <p>The result which i will be getting from WebApi will be in format: 3,5,6</p>
  
  <p>So the values Europe, France, Italy checkboxes should be selected.</p>
  
  <p>How to achieve this. I am new to angular 4.</p>