new version of option button control that has been modified to act as a form control. this should replace the existing old control wherever it is used.

projects/account/src/app/shared/components/option-btn/option-btn.component.html

@@ -0,0 +1,16 @@
+<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
+    <span *ngIf="config.label" [ngStyle]="{'width': config.labelWidth}" class="mat-subheading-2">
+        {{config.label}}
+    </span>
+    <mat-button-toggle-group
+            fxLayout="row wrap" fxLayoutAlign="center"
+            (change)="onChange($event.value)"
+            (blur)="onTouched()"
+    >
+        <ng-container *ngFor="let option of config.options">
+            <mat-button-toggle [ngStyle]="{'width': config.buttonWidth}" [value]="option">
+                {{option}}
+            </mat-button-toggle>
+        </ng-container>
+    </mat-button-toggle-group>
+</div>

projects/account/src/app/shared/components/option-btn/option-btn.component.scss

@@ -0,0 +1,11 @@
+@import "~src/stylesheets/components/buttons";
+
+.mat-subheading-2 {
+    margin-bottom: 8px;
+    margin-top: 16px;
+}
+
+mat-button-toggle-group {
+    @include options-button-group;
+}
+

projects/account/src/app/shared/components/option-btn/option-btn.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, Self, ViewChild } from '@angular/core';
+import { OptionButtonsConfig } from '@account/models/option-buttons-config.model';
+import { MatButtonToggleGroup } from '@angular/material';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+
+@Component({
+    selector: 'account-option-btn',
+    templateUrl: './option-btn.component.html',
+    styleUrls: ['./option-btn.component.scss']
+})
+export class OptionBtnComponent implements ControlValueAccessor {
+    @Input() config: OptionButtonsConfig;
+    @ViewChild(MatButtonToggleGroup) options: MatButtonToggleGroup;
+    public onChange;
+    public onTouched;
+    constructor(@Self() public controlDirective: NgControl) {
+        controlDirective.valueAccessor = this;
+    }
+
+    writeValue(value: any) {
+        this.options.value = value;
+    }
+
+    registerOnChange(fn: (value: any) => void) {
+        this.onChange = fn;
+    }
+
+    registerOnTouched(fn: () => void) {
+        this.onTouched = fn;
+    }
+}