Progress Bar Service

class ProgressBarService

This service manages the visibility of the MatProgressBar element in the App Component.

It:

1. Hides the progress bar when requested.

2. Shows the progress bar when requested.

3. Emits the progress bar configuration.

This progress bar can be used to indicate the progress of overarching journeys like login. It should be used in complement with other progress indicators on a page that indicate local progress.

Progress bar

Recipe: Use the different modes of the progress bar, as demonstrated in the examples, to distinguish between primary and secondary activities, thereby improving transparency for users.

Recipe: Integrate this service with an HttpInterceptor to automatiaclly hide and show the progress bar on a network request.

progress-bar.service.ts

@Injectable({
  providedIn: 'root',
})
export class ProgressBarService {
  private readonly _loggerService = inject(LoggerService);

  private readonly _defaultProgressBarConfiguration: ProgressBarConfiguration;
  private readonly _progressBarConfiguration: WritableSignal<ProgressBarConfiguration>;

  public constructor() {
    // Buy to unlock
  }

  public get progressBarConfiguration(): Signal<ProgressBarConfiguration> {
    // Buy to unlock
  }

  public hideProgressBar(): void {
    // Buy to unlock
  }

  public showProgressBar(
    partialProgressBarConfiguration?: Partial<ProgressBarConfiguration>,
  ): void {
    // Buy to unlock
  }

  public updateProgressBarConfiguration(
    partialProgressBarConfiguration: Partial<ProgressBarConfiguration>,
  ): void {
    // Buy to unlock
  }
}