File

progress-stepper/src/progress-stepper-body/progress-stepper-body.component.ts

Description

Progress Stepper leads the user through a multi-step process. Each step is represented by a Progress Step. It is controlled programmatically by ProgressStepperService.

Layout

The Progress Stepper's layout can be defined by the consuming app. Common layouts are provided by the library to speed up development and to ensure consistency accross different apps. Currently the library provides a full-page layout (ProgressStepperPageLayoutComponent) which is typically used in an Overlay context.

The full-featured Progress Stepper is composed of the three main sections: header, body, and footer.

Header

The header, placed at the top, lists all steps. Beside displaying the current progress, it allows the user to navigate to any step. User navigation is limited by validation which prevents skipping steps which are required but not yet completed (valid). Navigation to disabled steps is also prevented.

Body

The body section wraps the different steps, which represent the stepper's content. Optionally the app can display a banner which is displayed persistently accross all steps. The banner's content is provided by the app and wrapped by a Progress Stepper Banner component. It might contain dynamic content.

A single step's content is wrapped with a Progress Step component which offers input properties to control state (isValid, isRequired, isDisabled).These properties are updated by the consuming app. Required steps cannot be skipped by the user unless they are completed (valid). By default Progress Steps are considered required and valid. This means the user can navigate through the steps in any order unless the app sets steps invalid.

Footer

The footer is a fixed section at the bottom. It typically contains action buttons to navigate to the next or previous step. Navigation is typically based on Progress Stepper Service logic.

<talenra-progress-stepper-header />
<talenra-progress-stepper-body>
  <talenra-progress-steper-banner>...</talenra-progress-stepper-banner>
  <talenra-progress-step>...</talenra-progress-step>
  <talenra-progress-step>...</talenra-progress-step>
  <talenra-progress-step>...</talenra-progress-step>
</talenra-progress-stepper-body>
<talenra-progress-stepper-footer>...</talenra-progress-stepper-footer>

Progress Stepper Service

Progress Stepper Service is used to control the Progress Stepper (e.g. to navigate to the next or previous step or to set the state (enabled/disabled) of the navigation buttons in the footer).

// Component class:
// Provide a ProgressStepperService instance
@Component({
  providers: [{ provide: ProgressStepperService, useClass: ProgressStepperService }],
})
// Consume the service instance in your component class
private service: ProgressStepperService = inject(ProgressStepperService);
// Use the service to control Progress Stepper
service.next();

Import

import { ProgressStepperBodyComponent } from '@talenra/components/progress-stepper';

See ProgressStepperService See ProgressStepperHeaderComponent See ProgressStepperBannerComponent See ProgressStepComponent See ProgressStepperFooterComponent See ProgressStepperPageLayoutComponent See ProgressStepState