From 573fbb9a4031f51b3613d02188374a7171b9ca4e Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Sat, 14 Mar 2026 15:16:46 +0700
Subject: [PATCH] Task/improve type safety of toggle component (#6533)

* Improve type safety
---
 libs/ui/src/lib/toggle/toggle.component.html |  7 +++--
 libs/ui/src/lib/toggle/toggle.component.ts   | 32 +++++++++++---------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/libs/ui/src/lib/toggle/toggle.component.html b/libs/ui/src/lib/toggle/toggle.component.html
index ac2256daa..d6271ef58 100644
--- a/libs/ui/src/lib/toggle/toggle.component.html
+++ b/libs/ui/src/lib/toggle/toggle.component.html
@@ -3,13 +3,14 @@
   [formControl]="optionFormControl"
   (change)="onValueChange()"
 >
-  @for (option of options; track option) {
+  @for (option of options(); track option) {
     <mat-radio-button
       class="d-inline-flex"
-      [disabled]="isLoading"
+      [disabled]="isLoading()"
       [ngClass]="{
         'cursor-default': option.value === optionFormControl.value,
-        'cursor-pointer': !isLoading && option.value !== optionFormControl.value
+        'cursor-pointer':
+          !isLoading() && option.value !== optionFormControl.value
       }"
       [value]="option.value"
       >{{ option.label }}</mat-radio-button
diff --git a/libs/ui/src/lib/toggle/toggle.component.ts b/libs/ui/src/lib/toggle/toggle.component.ts
index be460f7fa..db7c45487 100644
--- a/libs/ui/src/lib/toggle/toggle.component.ts
+++ b/libs/ui/src/lib/toggle/toggle.component.ts
@@ -4,10 +4,9 @@ import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
-  EventEmitter,
-  Input,
-  OnChanges,
-  Output
+  effect,
+  input,
+  output
 } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatRadioModule } from '@angular/material/radio';
@@ -19,20 +18,25 @@ import { MatRadioModule } from '@angular/material/radio';
   styleUrls: ['./toggle.component.scss'],
   templateUrl: './toggle.component.html'
 })
-export class GfToggleComponent implements OnChanges {
-  @Input() defaultValue: string;
-  @Input() isLoading: boolean;
-  @Input() options: ToggleOption[] = [];
+export class GfToggleComponent {
+  public readonly defaultValue = input.required<string>();
+  public readonly isLoading = input<boolean>(false);
+  public readonly options = input<ToggleOption[]>([]);
 
-  @Output() valueChange = new EventEmitter<Pick<ToggleOption, 'value'>>();
+  protected readonly optionFormControl = new FormControl<string | null>(null);
+  protected readonly valueChange = output<Pick<ToggleOption, 'value'>>();
 
-  public optionFormControl = new FormControl<string>(undefined);
-
-  public ngOnChanges() {
-    this.optionFormControl.setValue(this.defaultValue);
+  public constructor() {
+    effect(() => {
+      this.optionFormControl.setValue(this.defaultValue());
+    });
   }
 
   public onValueChange() {
-    this.valueChange.emit({ value: this.optionFormControl.value });
+    const value = this.optionFormControl.value;
+
+    if (value !== null) {
+      this.valueChange.emit({ value });
+    }
   }
 }