Merge branch 'fix-button-toggle-bug' into 'main'

Fix console error "ExpressionChangedAfterItHasBeenCheckedError"

See merge request !119

alfa-client/libs/design-system/src/lib/form/button-toggle/button-toggle.component.spec.ts

@@ -68,22 +68,30 @@ describe('ButtonToggleComponent', () => {
       });
     });
 
-    describe('isChecked', () => {
+    describe('ngDoCheck', () => {
       it('should call isSelected', () => {
         component.isSelected = jest.fn();
         component.value = 'test';
 
-        component.isChecked;
+        component.ngDoCheck();
 
         expect(component.isSelected).toHaveBeenCalledWith('test');
       });
 
-      it('should return result of isSelected', () => {
+      it('should set isChecked', () => {
         component.isSelected = jest.fn().mockReturnValue(true);
 
-        const result: boolean = component.isChecked;
+        component.ngDoCheck();
 
-        expect(result).toBe(true);
+        expect(component.isChecked).toBe(true);
+      });
+    });
+
+    describe('isToggleChecked', () => {
+      it('should return isChecked', () => {
+        component.isChecked = true;
+
+        expect(component.isToggleChecked).toBe(true);
       });
     });
   });

alfa-client/libs/design-system/src/lib/form/button-toggle/button-toggle.component.ts

@@ -22,7 +22,7 @@
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
 import { CommonModule } from '@angular/common';
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, DoCheck, HostBinding, Input } from '@angular/core';
 import { CheckIconComponent } from '../../icons/check-icon/check-icon.component';
 
 @Component({
@@ -41,18 +41,26 @@ import { CheckIconComponent } from '../../icons/check-icon/check-icon.component'
     (blur)="isFocused = false"
     data-test-id="button-toggle"
   >
-    <ods-check-icon size="small" *ngIf="isChecked" data-test-id="toggle-check-icon" />
+    @if (isChecked) {
+      <ods-check-icon size="small" data-test-id="toggle-check-icon" />
+    }
     <p class="text-sm">{{ label }}</p>
   </button>`,
 })
-export class ButtonToggleComponent {
+export class ButtonToggleComponent implements DoCheck {
   @Input({ required: true }) label!: string;
   @Input({ required: true }) value!: string;
   @Input() onClick: () => void;
   @Input() isSelected: (value: string) => boolean = () => false;
 
+  isChecked: boolean = false;
+
   @HostBinding('class.ods-focused') isFocused: boolean = false;
-  @HostBinding('class.ods-button-toggle-checked') get isChecked() {
-    return this.isSelected(this.value);
+  @HostBinding('class.ods-button-toggle-checked') get isToggleChecked() {
+    return this.isChecked;
+  }
+
+  ngDoCheck(): void {
+    this.isChecked = this.isSelected(this.value);
   }
 }