Search code examples
angularangular-materialmaterial-designmat-stepper

Angular material stepper styling

Before fields filledAfter fields filled

Hi I want to customize the existing angular material steper ui like the given image. Is it possible to change the icon programatically,If there is an error then it should show an error icon with red color

https://stackblitz.com/edit/angular-4rvy2s-sprtoe?file=app/stepper-overview-example.ts

Solution

  • Based on you description, both things are possible and there are examples in the official documentation

    1. Custom icons:

    In order to use the custom step states, you must add the displayDefaultIndicatorType option to the global default stepper options which can be specified by providing a value for STEPPER_GLOBAL_OPTIONS in your application's root module.

    Soruce + Example: https://material.angular.io/components/stepper/overview#step-states

    2. Error state:

    If you want to show an error when the user moved past a step that hasn't been filled out correctly, you can set the error message through the errorMessage input and configure the stepper to show errors via the showError option in the STEPPER_GLOBAL_OPTIONS injection token.

    Source + Example: https://material.angular.io/components/stepper/overview#error-state