continue migrating toggle-group module

libs/components/src/toggle-group/toggle-group.component.ts

@@ -3,9 +3,9 @@ import {
   Component,
   EventEmitter,
   HostBinding,
-  Input,
   Output,
   input,
+  model,
 } from "@angular/core";
 
 let nextId = 0;
@@ -19,9 +19,7 @@ export class ToggleGroupComponent<TValue = unknown> {
   name = `bit-toggle-group-${this.id}`;
 
   readonly fullWidth = input<boolean, unknown>(undefined, { transform: booleanAttribute });
-  // TODO: Skipped for migration because:
-  //  Your application code writes to the input. This prevents migration.
-  @Input() selected?: TValue;
+  selected = model<TValue>();
   @Output() selectedChange = new EventEmitter<TValue>();
 
   @HostBinding("attr.role") role = "radiogroup";
@@ -31,7 +29,7 @@ export class ToggleGroupComponent<TValue = unknown> {
   }
 
   onInputInteraction(value: TValue) {
-    this.selected = value;
+    this.selected.set(value);
     this.selectedChange.emit(value);
   }
 }

libs/components/src/toggle-group/toggle.component.spec.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, model } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
 
@@ -39,7 +39,7 @@ describe("Button", () => {
     testAppComponent.value = "value";
     fixture.detectChanges();
 
-    mockGroupComponent.selected = "value";
+    mockGroupComponent.selected.set("value");
     fixture.detectChanges();
 
     expect(radioButton.checked).toBe(true);
@@ -49,16 +49,19 @@ describe("Button", () => {
     testAppComponent.value = "value";
     fixture.detectChanges();
 
-    mockGroupComponent.selected = "nonMatchingValue";
+    mockGroupComponent.selected.set("nonMatchingValue");
     fixture.detectChanges();
 
     expect(radioButton.checked).toBe(false);
   });
 });
 
-class MockedButtonGroupComponent implements Partial<ToggleGroupComponent> {
+@Component({
+  selector: "mock-button-group",
+})
+class MockedButtonGroupComponent implements Partial<ToggleGroupComponent<string>> {
   onInputInteraction = jest.fn();
-  selected: unknown = null;
+  selected = model<string>();
 }
 
 @Component({

libs/components/src/toggle-group/toggle.component.ts

@@ -41,7 +41,7 @@ export class ToggleComponent<TValue> implements AfterContentChecked, AfterViewIn
   }
 
   get selected() {
-    return this.groupComponent.selected === this.value();
+    return this.groupComponent.selected() === this.value();
   }
 
   get inputClasses() {