diff --git a/projects/kit/components/stepper/step.component.ts b/projects/kit/components/stepper/step.component.ts index ec2a0d1bb3b6..04edf95a9dbf 100644 --- a/projects/kit/components/stepper/step.component.ts +++ b/projects/kit/components/stepper/step.component.ts @@ -1,10 +1,10 @@ import {NgIf} from '@angular/common'; import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core'; +import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {RouterLinkActive} from '@angular/router'; import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom'; import {TuiIcon} from '@taiga-ui/core/components/icon'; import {TUI_COMMON_ICONS} from '@taiga-ui/core/tokens'; -import type {Observable} from 'rxjs'; import {EMPTY, filter} from 'rxjs'; import {TuiStepperComponent} from './stepper.component'; @@ -29,8 +29,11 @@ import {TuiStepperComponent} from './stepper.component'; export class TuiStep { private readonly stepper = inject(TuiStepperComponent); private readonly el = tuiInjectElement(); - private readonly routerLinkActive$: Observable = - inject(RouterLinkActive, {optional: true})?.isActiveChange || EMPTY; + protected readonly $ = ( + inject(RouterLinkActive, {optional: true})?.isActiveChange.asObservable() ?? EMPTY + ) + .pipe(filter(Boolean), takeUntilDestroyed()) + .subscribe(() => this.activate()); protected focusVisible = false; @@ -42,12 +45,6 @@ export class TuiStep { @Input() public icon = ''; - constructor() { - this.routerLinkActive$.pipe(filter(Boolean)).subscribe(() => { - this.activate(); - }); - } - protected get isActive(): boolean { return this.stepper.isActive(this.index); } diff --git a/projects/kit/components/stepper/stepper.component.ts b/projects/kit/components/stepper/stepper.component.ts index 175c4f683de6..d10ad442af5a 100644 --- a/projects/kit/components/stepper/stepper.component.ts +++ b/projects/kit/components/stepper/stepper.component.ts @@ -60,18 +60,16 @@ export class TuiStepperComponent { protected activeItemIndex = 0; + protected readonly $ = inject(ResizeObserverService, {self: true}) + .pipe(takeUntilDestroyed()) + .subscribe(() => this.scrollIntoView(this.activeItemIndex)); + @Input() public orientation: TuiOrientation = 'horizontal'; @Output() public readonly activeItemIndexChange = new EventEmitter(); - constructor() { - inject(ResizeObserverService, {self: true}) - .pipe(takeUntilDestroyed()) - .subscribe(() => this.scrollIntoView(this.activeItemIndex)); - } - @Input('activeItemIndex') public set activeIndex(index: number) { this.activeItemIndex = index;