0

am having a problem on changing a class once i click on the step of a mat-stepper. Does anybody knows how to give a dynamic class once the stepper change index for example ?

Nicola R.
  • 1
  • 2
  • Could you please explain a little more? What element are you changing the class on? Do you want it to change based on the step that is selected? – robbieAreBest May 24 '21 at 10:58
  • @robbieAreBest exactly, i'd like to change the class, for example the background color, lets say of the step number, based on the selected step. – Nicola R. May 24 '21 at 11:09
  • Can you show us what have you tried before and whats not working as per your expectation ? – Developer May 24 '21 at 12:37
  • I am trying to edit the background of my step-header using a custom class, with the selected item property. Point 1: it works when i try to modify html elements. Point 2: it doesn't work, because the step-header is generated automatically from the mat-stepper. So my question is, how can i give a custom class, on the selected step to its step-header ? Hope it will help a bit ! @GaurangDhorda – Nicola R. May 24 '21 at 12:51
  • https://stackblitz.com/angular/gagypxjnadb?file=src%2Fapp%2Fstepper-overview-example.ts take this example, and tell me whats are you doing and not working ? – Developer May 24 '21 at 12:56
  • here is the example : https://stackblitz.com/edit/angular-agv7m3?file=src%2Fapp%2Fstepper-overview-example.html. What i'd like to do, is to change the background of the entire step-header, the one you see when you hover the place "Fill out your name" for example. @GaurangDhorda – Nicola R. May 24 '21 at 13:04
  • Means you need to change backgroundColor of part where you click on 1 stepper, then some animation effects takes place, and you want to change color of that part only but when its selected stepper ? – Developer May 24 '21 at 13:10
  • Whe we click the step 1 for example, the "container" of Fill out your name, become red for example. For "container" i mean, the entire area u see when you hover the step. – Nicola R. May 24 '21 at 13:10
  • @GaurangDhorda Yep, that's the point. – Nicola R. May 24 '21 at 13:11

2 Answers2

0

Edit :

I've got this solution working for me,it was easier then i thought, hope it will helps someone :

 ::ng-deep .mat-step-header[aria-selected="true"]  {
      background-color: var(--primary-color);
    }
Nicola R.
  • 1
  • 2
0

here a demo on stackblitz, it changes the background of the step icon once you click on the stepper.

stepper dynamic change

Dharman
  • 30,962
  • 25
  • 85
  • 135
bouchahda jouda
  • 11
  • 2