49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import {
|
|
ChangeDetectionStrategy,
|
|
Component,
|
|
contentChildren,
|
|
input,
|
|
linkedSignal,
|
|
} from '@angular/core';
|
|
import { StepComponent } from './step.component';
|
|
import { NgClass } from '@angular/common';
|
|
|
|
@Component({
|
|
selector: 'app-stepper',
|
|
imports: [NgClass],
|
|
templateUrl: './stepper.component.html',
|
|
styleUrl: './stepper.component.scss',
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class StepperComponent {
|
|
readonly steps = contentChildren(StepComponent);
|
|
readonly initialStepIndex = input(0);
|
|
readonly currentStepIndex = linkedSignal(() => this.initialStepIndex());
|
|
|
|
next() {
|
|
const currentSteps = this.steps();
|
|
const currentIndex = this.currentStepIndex();
|
|
if (currentIndex < currentSteps.length - 1) {
|
|
const currentStep = currentSteps[currentIndex];
|
|
if (currentStep.isValid()) {
|
|
this.currentStepIndex.set(currentIndex + 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
previous() {
|
|
const currentIndex = this.currentStepIndex();
|
|
if (currentIndex > 0) {
|
|
this.currentStepIndex.set(currentIndex - 1);
|
|
}
|
|
}
|
|
|
|
goToStep(index: number) {
|
|
const targetIndex = index;
|
|
// Only allow navigating to completed steps or the current one
|
|
if (targetIndex < this.currentStepIndex()) {
|
|
this.currentStepIndex.set(targetIndex);
|
|
}
|
|
}
|
|
}
|