@talenra/components documentation
  1. Injectables
  2. ProgressStepperService

File

progress-stepper/src/progress-stepper.service.ts

Description

ProgressStepperService allows to control ProgressStepper programmatically. It provides logic to navigate between steps, get ProgressStepper's current state and can be used to access its steps.

Usage

In your app, provide a service instance for each ProgressStepper instance.

Example :
@Component({
  selector: 'app-my-component',
  providers: [{ provide: ProgressStepperService, useClass: ProgressStepperService }],
})

To control ProgressStepper, consume the service in your app.

Example :
private service: ProgressStepperService = inject(ProgressStepperService);
console.log(`Currently selected step is at index ${this.service.selectedIndex()}.`);

Import

Example :
import { ProgressStepperService } from '@talenra/components/progress-stepper';

See ProgressStepperBodyComponent

Index

Properties
Methods

Methods

Public canSkipTo
canSkipTo(index: number)

Check whether we can proceed to a given step index. Returns true if the given index is whithin boundaries and all previous steps are valid or optional.

Example :
private service: ProgressStepperService = inject(ProgressStepperService);
console.log(`We ${this.service.canSkipTo(2) ? 'can' : 'cannot'} skip to step at index 2.`);
Parameters :
Name Type Optional
index number No
Returns : boolean
Public getStepAt
getStepAt(index: number)

Retruns the step at the given index or null.

Example :
private service: ProgressStepperService = inject(ProgressStepperService);
console.log(`Step at index 2 is ${this.service.getStep(2)?.title()}.`);
Parameters :
Name Type Optional
index number No
Returns : ProgressStepComponent | null
Public next
next()

Switch to the next step if available. Returns the index of the selected step after navigation.

Example :
private service: ProgressStepperService = inject(ProgressStepperService);
console.log(`Switched to step at index ${this.service.next()}.`);
Returns : number
Public previous
previous()

Switch to the previous step if available. Returns the index of the selected step after navigation.

Example :
private service: ProgressStepperService = inject(ProgressStepperService);
console.log(`Switched to step at index ${this.service.previous()}.`);
Returns : number
Public skipTo
skipTo(index: number)

Skip to the step at the given index. Returns the index of the selected step after navigation.

Example :
private service: ProgressStepperService = inject(ProgressStepperService);
console.log(`Switched to step at index ${this.service.skipTo(2)}.`);
Parameters :
Name Type Optional
index number No
Returns : number

Properties

Public Readonly contentHeight
Type : unknown
Default value : computed<number | null>(() => { // Check if this is the initial call const isInitialCall: boolean = this.cachedContentHeight === null; // Make sure initial call is triggered only once if (isInitialCall) this.cachedContentHeight = 0; // Update content height cache if we get a value > 0 if (this.currentStep()?.height() >= 0) this.cachedContentHeight = this.currentStep().height(); // Return the cached height value return isInitialCall ? null : this.cachedContentHeight; })

The content height of the currently selected step in px. Returns initially and only initially null to prevent unwanted reflows/transitions.

Example :
private service: ProgressStepperService = inject(ProgressStepperService);
console.log(`Content height of the current step is ${this.service.contentHeight}px.`);
Public Readonly selectedIndex
Type : unknown
Default value : this._selectedIndex.asReadonly()

Index of the currently selected step

Example :
private service: ProgressStepperService = inject(ProgressStepperService);
console.log(`Currently selected step is at index ${this.service.selectedIndex()}.`);
Public Readonly showStepNumbers
Type : unknown
Default value : signal<boolean>(true)

Determines whether step numbers are displayed in Progress Stepper's header.

Example :
private service: ProgressStepperService = inject(ProgressStepperService);
private toggleStepNumbers(): void {
  this.service.showStepNumbers.update((value: boolean) => !value);
}
Public Readonly steps
Type : unknown
Default value : this._steps.asReadonly()

Array holding references of all ProgressSteps in order of appearance

Example :
private service: ProgressStepperService = inject(ProgressStepperService);
console.log(`ProgressStepper contains ${this.service.steps().length} steps.`);

results matching ""

    No results matching ""