fix(experimental): Segmented fix initial radio value (#9074)

projects/demo/src/modules/experimental/segmented/examples/4/index.ts

@@ -11,7 +11,7 @@ import {encapsulation} from '@demo/emulate/encapsulation';
     changeDetection,
 })
 export class TuiSegmentedExample4 {
-    selected = 'a';
+    selected = 'b';
 
     readonly options: IsActiveMatchOptions = {
         matrixParams: 'exact',

projects/experimental/components/segmented/segmented.component.ts

@@ -62,7 +62,7 @@ export class TuiSegmentedComponent implements OnChanges {
     }
 
     update(activeItemIndex: number): void {
-        if (activeItemIndex === this.activeItemIndex) {
+        if (activeItemIndex === this.activeItemIndex || activeItemIndex < 0) {
             return;
         }
 

projects/experimental/components/segmented/segmented.directive.ts

@@ -7,13 +7,11 @@ import {
     HostListener,
     Inject,
     QueryList,
-    Self,
 } from '@angular/core';
-import {NgControl} from '@angular/forms';
+import {NgControl, RadioControlValueAccessor} from '@angular/forms';
 import {RouterLinkActive} from '@angular/router';
-import {EMPTY_QUERY, TuiDestroyService, tuiQueryListChanges} from '@taiga-ui/cdk';
-import {EMPTY, Observable} from 'rxjs';
-import {switchMap, takeUntil} from 'rxjs/operators';
+import {EMPTY_QUERY, tuiControlValue, tuiQueryListChanges} from '@taiga-ui/cdk';
+import {map, switchMap} from 'rxjs/operators';
 
 import {TuiSegmentedComponent} from './segmented.component';
 
@@ -24,35 +22,32 @@ export class TuiSegmentedDirective implements AfterContentChecked, AfterContentI
     @ContentChildren(NgControl, {descendants: true})
     private readonly controls: QueryList<NgControl> = EMPTY_QUERY;
 
+    @ContentChildren(RadioControlValueAccessor, {descendants: true})
+    private readonly radios: QueryList<RadioControlValueAccessor> = EMPTY_QUERY;
+
     @ContentChildren(RouterLinkActive)
     private readonly links: QueryList<RouterLinkActive> = EMPTY_QUERY;
 
     @ContentChildren(RouterLinkActive, {read: ElementRef})
     private readonly elements: QueryList<ElementRef<HTMLElement>> = EMPTY_QUERY;
 
     constructor(
-        @Self() @Inject(TuiDestroyService) private readonly destroy$: Observable<unknown>,
         @Inject(TuiSegmentedComponent) private readonly component: TuiSegmentedComponent,
-        @Inject(ElementRef) private readonly el: ElementRef<HTMLElement>,
     ) {}
 
     @HostListener('click', ['$event.target'])
     update(target: Element | null): void {
-        const index = this.getIndex(target);
-
-        if (index >= 0) {
-            this.component.update(index);
-        }
+        this.component.update(this.getIndex(target));
     }
 
     ngAfterContentInit(): void {
         tuiQueryListChanges(this.controls)
             .pipe(
-                switchMap(() => this.controls.last?.valueChanges || EMPTY),
-                takeUntil(this.destroy$),
+                switchMap(() => tuiControlValue(this.controls.first)),
+                map(value => this.radios.toArray().findIndex(c => c.value === value)),
             )
-            .subscribe(() => {
-                this.update(this.el.nativeElement.querySelector(':checked'));
+            .subscribe(index => {
+                this.component.update(index);
             });
     }