Angular 4 | Material 2 - Highlight of button toggle group not changing correctly Programatically

Question

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.

Source files and picture demonstration below.

TS

 @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<OrderFieldsDialog>,
        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 > 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 < (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 });
    }
}

HTML

  <div class="dialog-box" align="center">
    <h1 md-dialog-title>Order Fields</h1>
    <div class="pull-right">
        <md-icon (click)="moveFieldUp()" class="order-button hover-theme-primary">expand_less</md-icon>
        <br />
        <md-icon (click)="moveFieldDown()" class="order-button move-field-down hover-theme-primary">expand_more</md-icon>
    </div>

    <md-button-toggle-group id="buttonToggleValue" *ngIf="showButtonToggleGroup" [vertical]="true">
        <ng-container *ngFor="let field of fieldsTable; let i = index">
            <md-button-toggle class="toggle-button" id="button-toggle-{{i}}" (click)="onSelect(i)" *ngIf="!field.IsKey" value={{i}}>
                {{field.Name}} 
            </md-button-toggle>
        </ng-container>
    </md-button-toggle-group>

    <md-dialog-actions align="center">
        <button md-raised-button (click)="dialogRef.close('Cancel')">Close</button>
    </md-dialog-actions>
</div>

CSS

  .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%;
}

Picture demonstration below

Open the dialog

Select FIELD THREE

Press Down Once (it moves the data correctly and highlights correctly)

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)

Any help in solving this would be greatly appreciated. I'm drawing a blank on why this might be happening and really need help.

Answer 1

I have finally figured this out.

Using a very short setTimeout function (not a Promise) i was able to get this working.

TS:

@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<OrderFieldsDialog>,
        private snackBar: MdSnackBar
    ) { }

    // fucntion called when selecting a button toggle
    onSelect(index: number): void {
        this.buttonToggleValue = index;
    }

    // function to move a field up 
    moveFieldUp(): void {
        let self = this;
        if (this.buttonToggleValue > 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;
            setTimeout(function () {
                // this function removes a bug with highlighting of the button toggles
                // the delay is necessary don't remove
                var temp = "button-toggle-" + (self.buttonToggleValue + 1);
                document.getElementById(temp).setAttribute("class", "toggle-button mat-button-toggle");
            }, 5);
        }
        else {
            this.openSnackBar("You can not move the top item up.");
        }
    }

    // function to move a field down
    moveFieldDown(): void {
        if (this.buttonToggleValue < (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 });
    }
}

HTML:

<div class="dialog-box" align="center">
    <h1 md-dialog-title>Order Fields</h1>
    <div class="pull-right">
        <md-icon (click)="moveFieldUp()" class="order-button hover-theme-primary">expand_less</md-icon>
        <br />
        <md-icon (click)="moveFieldDown()" class="order-button move-field-down hover-theme-primary">expand_more</md-icon>
    </div>

    <md-button-toggle-group *ngIf="showButtonToggleGroup" [vertical]="true">
        <ng-container *ngFor="let field of fieldsTable; let i = index">
            <md-button-toggle class="toggle-button" id="button-toggle-{{i}}" (click)="onSelect(i)" *ngIf="!field.IsKey" value={{i}}>
                {{field.Name}} 
            </md-button-toggle>
        </ng-container>
    </md-button-toggle-group>

    <md-dialog-actions align="center">
        <button md-raised-button (click)="dialogRef.close('Cancel')">Close</button>
    </md-dialog-actions>
</div>

CSS:

.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%;
}

.move-field-down {
    margin-top: 25%;
}

I still don't understand why i the first place the move field up function was causing it to have two selected but this work around will suffice.