diff --git a/projects/demo/src/modules/experimental/segmented/examples/4/index.ts b/projects/demo/src/modules/experimental/segmented/examples/4/index.ts index 3ed3305a2995..a52058b7b022 100644 --- a/projects/demo/src/modules/experimental/segmented/examples/4/index.ts +++ b/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', diff --git a/projects/experimental/components/segmented/segmented.component.ts b/projects/experimental/components/segmented/segmented.component.ts index d5b1ea2b9b72..4ffe91626025 100644 --- a/projects/experimental/components/segmented/segmented.component.ts +++ b/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; } diff --git a/projects/experimental/components/segmented/segmented.directive.ts b/projects/experimental/components/segmented/segmented.directive.ts index e4a2e929d0e9..395ca26d9b5f 100644 --- a/projects/experimental/components/segmented/segmented.directive.ts +++ b/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,6 +22,9 @@ export class TuiSegmentedDirective implements AfterContentChecked, AfterContentI @ContentChildren(NgControl, {descendants: true}) private readonly controls: QueryList = EMPTY_QUERY; + @ContentChildren(RadioControlValueAccessor, {descendants: true}) + private readonly radios: QueryList = EMPTY_QUERY; + @ContentChildren(RouterLinkActive) private readonly links: QueryList = EMPTY_QUERY; @@ -31,28 +32,22 @@ export class TuiSegmentedDirective implements AfterContentChecked, AfterContentI private readonly elements: QueryList> = EMPTY_QUERY; constructor( - @Self() @Inject(TuiDestroyService) private readonly destroy$: Observable, @Inject(TuiSegmentedComponent) private readonly component: TuiSegmentedComponent, - @Inject(ElementRef) private readonly el: ElementRef, ) {} @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); }); }