Angular material stepper header lines styling

angular material stepper validation
angular material stepper responsive
material design stepper
angular 6 multi step form
mat-step is not a known element
can t bind to stepcontrol since it isn t a known property of mat-step
no provider for cdkstepper
matsteppericon

I'm trying to implement this design for the steps, but not successful so far, the closest I got, was giving color to the line next to the current active step:

.mat-horizontal-stepper-header {
padding: 0 8px 0 16px !important;
&[ng-reflect-active="true"]+.mat-stepper-horizontal-line {
    border-top-color: rgba(37, 82, 245, 0.54) !important;
}

}

but the purpose is to color the previous line of the active step as in the picture.

any thoughts on this? here's a stackblitz for repro https://stackblitz.com/edit/angular-ngcsei

In production environment those reflect active attributes don't exist, so I came up with this solution based on the index of the elements. I just give a class to the mat-horizontal-stepper element with the index of the active step: last-edited-step-0, last-edited-step-1, last-edited-step-2. Then I created this mixins:

@mixin styleStepLine($index) {
    .mat-horizontal-stepper-header {
        &+.mat-stepper-horizontal-line:nth-child(#{$index}) {
            height: 2px;
            background-image: linear-gradient(to right, #00b495, #00aeea);
        }
    }
}

@mixin styleEditedStepIcon($index) {
    .mat-horizontal-stepper-header:nth-child(#{$index}) {
        .mat-step-icon:not(.mat-step-icon-selected) {
            background-color: map-get($colors, 'light-green');
        }
    }
}

@mixin styleUnEditedStepIcon($index) {
    .mat-horizontal-stepper-header:nth-child(#{$index}) {
        .mat-step-icon:not(.mat-step-icon-selected) {
            background-color: #e8e8e8;
        }
    }
}

.last-edited-step-1 {
    @include styleStepLine(2);
    @include styleEditedStepIcon(1);
    @include styleUnEditedStepIcon(3);
}

.last-edited-step-2 {
    @include styleStepLine(2);
    @include styleStepLine(4);
    @include styleEditedStepIcon(1);
    @include styleEditedStepIcon(3);
}

Stepper, Material stepper extends the CDK stepper and has Material Design styling. By default, the step headers will use the create and done icons from the Material  I've tried doing this by styling .mat-horizontal-stepper-header-container (actually just adding a border to it). I forced the content of the last step to be tall. There, you can see that the buttons on each step no longer align.

Here's my solution, inspired on the one proposed by @dazzed.

In the HTML, I'm giving a class to the mat-horizontal-stepper of 'last-edited-step-'last-edited-step-' + stepper.selectedIndex.

In terms of CSS, I'm dynamically generating classes with SASS for loops, so looping ($i) from .last-edited-step-last-edited-step-1 up to .last-edited-step-last-edited-step-42 (42 as an example, that is meant to be the number of steps, of course). Then inside each of them, I'm looping again ($j) between the first and the nth line and then assigning the properties (in my case, a green border colour).

stepper.component.html

    <mat-horizontal-stepper #stepper [linear]="true" class="{{ 'last-edited-step-' + stepper.selectedIndex }}">

        <mat-step>
        </mat-step>

        <mat-step>
        </mat-step>

        <mat-step>
        </mat-step>

    </mat-horizontal-stepper>

stepper.component.sass

/deep/ mat-horizontal-stepper
  @for $i from 1 through 42
    &.last-edited-step-#{$i}
     @for $j from 1 through $i
        .mat-stepper-horizontal-line:nth-of-type(#{$j})
          border-color: #00c190 !important

Using that, together with styling a few other elements (the circles, icons, line proportions) you can get something like this:

Creating a custom stepper using the CdkStepper, The CDK stepper allows to build a custom stepper which you can completely style <header><h2>Step {{selectedIndex + 1}}/{{steps.length}}</h2></header> <div In the app.component.css file we can now style the stepper however we want: .example-container { border: 1px solid black; padding: 10px; margin: 10px; }  Angular Material Stepper: Styling Mat-Step Icon and Label Together [closed] I’m using Angular Material Stepper and would like to style the active icon and label together to give them rounded borders with blue background.

I am late to this thread, thinking this may be helpful for someone. I have the same requirement except for the icon colors I tried every solution suggested but nothing was working as expected. I tried the below solution which is working fine for me-

DEMO

@mixin styleStepLine($index) {
	.mat-horizontal-stepper-header {
		&+.mat-stepper-horizontal-line:nth-child(#{$index}) {
			height: 2px;
			background-image: linear-gradient(to right, #00b495, #00aeea);
		}
	}
}

@mixin styleEditedStepIcon($index) {
	.mat-horizontal-stepper-header:nth-child(#{$index}) {
		.mat-step-icon:not(.mat-step-icon-selected) {
			background-color: red;
		}
	}
}

@mixin styleUnEditedStepIcon($index) {
	.mat-horizontal-stepper-header:nth-child(#{$index}) {
		.mat-step-icon:not(.mat-step-icon-selected) {
			background-color: #e8e8e8;
		}
	}
}

.last-edited-step-1 {
	@include styleStepLine(2);
}

.last-edited-step-2 {
	@include styleStepLine(2);
	@include styleStepLine(4);
}

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before,
.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after,
[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::after,
[dir=rtl] .mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::before {
	width: 0!important;
}

.mat-step-header .mat-step-header-ripple {
	display: none;
}

.mat-step-header.cdk-keyboard-focused,
.mat-step-header.cdk-program-focused,
.mat-step-header:hover {
	background-color: #fff;
}

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header {
	padding: 8px 0 8px 0 !important;
	width: 35px !important;
}

.mat-stepper-label-position-bottom .mat-stepper-horizontal-line {
	top: 20px !important;
}
<mat-horizontal-stepper linear #stepper ngClass="{{ 'last-edited-step-' + stepper.selectedIndex }}" labelPosition="bottom">
  <mat-step [stepControl]="firstFormGroup" errorMessage="Name is required.">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>h1</ng-template>
      <mat-form-field>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
        <mat-form-field appearance="outline">
    <mat-label>Outline form field</mat-label>
    <input matInput placeholder="Placeholder">
    <mat-hint>Hint</mat-hint>
  </mat-form-field>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup" errorMessage="Address is required.">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>h2</ng-template>
      <mat-form-field>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

Angular material stepper header lines styling, .mat-horizontal-stepper-header { padding: 0 8px 0 16px !important; &[ng-reflect-​active="true"]+.mat-stepper-horizontal-line { border-top-color:  Angular material stepper change icon color - angular - html, <mat-vertical-stepper> <mat-step label="Step 1"> Content 1 </mat-step> is the default value, while bottom will place it under the step icon instead of at its side. their responses. editable="false" can be set on mat-step to change the default.

I did something similar just a while ago, while it's not perfect, it might help you get there. You can think the other way around. Try to target all lines passed the active step. In this example all steps after the active one have a dashed line and all before have a solid line.

.mat-stepper-horizontal-line {
   border-top-style: solid;
}

.mat-horizontal-stepper-header {
&[ng-reflect-active='false'] + .mat-stepper-horizontal-line {
  border-top-style: dashed;
}

&[ng-reflect-selected='true'] + .mat-stepper-horizontal-line {
  border-top-style: dashed;
}

}

mat-stepper: Allow custom CSS classes for mat-step-header · Issue , Please add API to add custom css classes to mat-step-header. What is the We want to set custom cursor for disabled steps in linear stepper. angular / components I too would like to be able to style my step headers via CSS classes. The material team should add a disable option on <mat-step >. angular material stepper: disable header navigation You can try this till Angular Material Team support this feature. Use this on your style sheet to remove

This works perfect to me to change selected step

.mat-horizontal-stepper-header {
  &[ng-reflect-selected="true"].mat-step-header {
    background-color: #000;
  }
&[ng-reflect-selected="false"].mat-step-header {
    background-color: #fff;
  }
}

Mat-Stepper: Change Line Color when step was completed (next , Feature Allow to change the step line color when step was completed. The border left color of better user experience. Angular material 5.2.2  link Nested menu . Material supports the ability for an mat-menu-item to open a sub-menu. To do so, you have to define your root menu and sub-menus, in addition to setting the [matMenuTriggerFor] on the mat-menu-item that should trigger the sub-menu:

angular-mat-stepper-full-height, Demo to show the issues when you want to expand a stepper. <mat-step label​="Step 1" fxFlex="100". fxLayout="column">. <div style="border: 2px solid green;. UI component infrastructure and Material Design components for mobile and desktop Angular web applications.

angular material stepper: disable header navigation, angular material stepper: disable header navigation - angular. code to you style.css file in the root:- .mat-step-header { pointer-events: none !important; } Datatable code - test.component.html <ngx-datatable class="material" [rows]="​rows"  I have an input type time and I can style all except the picker. I’ve searched in documentation and in several webs but I haven’t found the way to do this. I want to change blue to gree…

UNPKG, The CDN for @angular/material. class=\"mat-horizontal-stepper-header-​container\"><ng-container *ngFor=\"let step of _steps; let i }.mat-stepper-​horizontal-line{border-top-width:1px;border-top-style:solid;flex:auto;height:0;​margin:0 -16px  Install with NPM View Source on Github {{doc | humanizeDoc | directiveBrackets:doc.restrict}} {{doc | humanizeDoc | directiveBrackets}} View Demo View Source on Github

Comments
  • could you share a demo? Unable to achieve what you did
  • can somebody provide a css version of the above stepper.component.sass?
  • Just use sass2css.online and paste my code (remember to change the 42 for the number of steps)
  • thank you so much for the link.. it failed in other websites
  • Happy to help ;)
  • thank you for your comment, that isn't a valid solution, also wasn't was what I was trying because in prod those reflect active attributes don't exist. I found a way though.