title: Angular 4 | Material 2 - Highlight of button toggle group not changing correctly Programatically
body: <p>I have ran into an issue where I'm able to reorder a grid list with no issue in terms of the actual data moving, however  the highlighting of the button toggles does not match up with the data being switched it lags behind the data being moved and I can't seem to remedy this issue. </p>
  
  <p>Source files and picture demonstration below.</p>
  
  <p><strong>TS</strong> </p>
  
  <pre><code> @Component({
      selector: 'sort-fields-dialog',
      templateUrl: './sort.fields.dialog.component.html',
      styleUrls: ['./sort.fields.dialog.component.css']
  })
  export class OrderFieldsDialog {
      fieldsTable: any[];
      buttonToggleValue: number; 
      showButtonToggleGroup: boolean = true;
  
      constructor(
          public dialogRef: MdDialogRef&lt;OrderFieldsDialog&gt;,
          private snackBar: MdSnackBar
      ) { }
  
      // fucntion called when selecting a button toggle
      onSelect(index: number): void {
          this.buttonToggleValue = index;
          console.log(index);
      }
  
      // function to move a field up
      moveFieldUp(): void {
          if (this.buttonToggleValue &gt; 1) {
              this.showButtonToggleGroup = false;
              var temp = this.fieldsTable[this.buttonToggleValue];
              this.fieldsTable[this.buttonToggleValue] = this.fieldsTable[this.buttonToggleValue - 1];
              this.fieldsTable[this.buttonToggleValue - 1] = temp;
              this.buttonToggleValue--;
              this.showButtonToggleGroup = true;
          }
          else {
              this.openSnackBar("You can not move the top item up.");
          }
      }
  
      // function to move a field down
      moveFieldDown(): void {
          if (this.buttonToggleValue &lt; (this.fieldsTable.length - 1)) {
              this.showButtonToggleGroup = false;
              var temp = this.fieldsTable[this.buttonToggleValue];
              this.fieldsTable[this.buttonToggleValue] = this.fieldsTable[this.buttonToggleValue + 1];
              this.fieldsTable[this.buttonToggleValue + 1] = temp;
              this.buttonToggleValue++;
              this.showButtonToggleGroup = true;
          }
          else {
              this.openSnackBar("You can not move the bottom item down.");
          }
      }
  
      // opens a bottom snackbar
      openSnackBar(message: string) {
          this.snackBar.open(message, "Close", { duration: 975 });
      }
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;div class="dialog-box" align="center"&gt;
      &lt;h1 md-dialog-title&gt;Order Fields&lt;/h1&gt;
      &lt;div class="pull-right"&gt;
          &lt;md-icon (click)="moveFieldUp()" class="order-button hover-theme-primary"&gt;expand_less&lt;/md-icon&gt;
          &lt;br /&gt;
          &lt;md-icon (click)="moveFieldDown()" class="order-button move-field-down hover-theme-primary"&gt;expand_more&lt;/md-icon&gt;
      &lt;/div&gt;
  
      &lt;md-button-toggle-group id="buttonToggleValue" *ngIf="showButtonToggleGroup" [vertical]="true"&gt;
          &lt;ng-container *ngFor="let field of fieldsTable; let i = index"&gt;
              &lt;md-button-toggle class="toggle-button" id="button-toggle-{{i}}" (click)="onSelect(i)" *ngIf="!field.IsKey" value={{i}}&gt;
                  {{field.Name}} 
              &lt;/md-button-toggle&gt;
          &lt;/ng-container&gt;
      &lt;/md-button-toggle-group&gt;
  
      &lt;md-dialog-actions align="center"&gt;
          &lt;button md-raised-button (click)="dialogRef.close('Cancel')"&gt;Close&lt;/button&gt;
      &lt;/md-dialog-actions&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>  .dialog-box {
      font-family: Roboto, Arial, sans-serif;
      display: inline-block;
  }
  
  .toggle-button {
      width: 100%;
      min-width: 300px;
  }
  
  .order-button {
      cursor: pointer;
      margin-top: -22%;
      font-size: 175%;
  }
  
  button:nth-child(2) {
      margin-left: 15px;
  }
  
  .move-field-down {
      margin-top: 25%;
  }
  </code></pre>
  
  <p><strong>Picture demonstration below</strong></p>
  
  <p>Open the dialog</p>
  
  <p><a href="https://i.stack.imgur.com/brrrd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/brrrd.png" alt="Open dialog"></a></p>
  
  <p>Select FIELD THREE</p>
  
  <p><a href="https://i.stack.imgur.com/aVlZE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aVlZE.png" alt="enter image description here"></a></p>
  
  <p>Press Down Once (it moves the data correctly and highlights correctly)</p>
  
  <p><a href="https://i.stack.imgur.com/vpmcA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vpmcA.png" alt="enter image description here"></a></p>
  
  <p>Press Up Once (now it shows the issue, the data moves correctly but when moving fields up it keeps the one moving on the top highlighted but also highlights whatever is below it)</p>
  
  <p><a href="https://i.stack.imgur.com/cTKEv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cTKEv.png" alt="enter image description here"></a></p>
  
  <p>Any help in solving this would be greatly appreciated. I'm drawing a blank on why this might be happening and really need help.</p>