title: How to select the mat-button-toggle by default in angular 6
body: <p>I have a reactive angular-6 form, in which I have used mat-button-toggle-group</p>
  
  <pre><code>&lt;mat-button-toggle-group #group="matButtonToggleGroup"  [(value)]="myFlagForButtonToggle" (change)="onEndpointValChange(group.value)"  multiple=false formControlName='endpoints' [(ngModel)]="myFlagForButtonToggle"&gt;
            &lt;mat-button-toggle  *ngFor="let item of endpointToggleOptions;" [value]="item"&gt;{{item}}&lt;/mat-button-toggle&gt;
  &lt;/mat-button-toggle-group&gt;
  </code></pre>
  
  <p>In ts file I have</p>
  
  <pre><code>  myFlagForButtonToggle: String[] = ["Single"];
    endpointToggleOptions: Array&lt;String&gt; = ["Single", "Multiple"];
  </code></pre>
  
  <p>But in the UI no of the toggle button is selected by default. </p>
  
  <p>Please help, what I am doing wrong</p>
  
  <p>My Model is like this</p>
  
  <pre><code>this.outerForm = this._formBuilder.group({
    firstFormGroup: this._formBuilder.group({
      pidNumber: ['', [Validators.pattern(this.spacePattern)]],
    }),
    secondFormGroup: this._formBuilder.group({
      endpoints: ['', [Validators.required]]
    })
  });
  </code></pre>
  
  <p>EDIT: I want mat-button-toggle-group to bind with my model also.</p>