Angular 4 - Change Background color of Stepper depending on the status

angular 4 stepper example
angular material stepper
angular material stepper validation
angular stepper example
mat-stepper-horizontal-line color
matsteppericon
angular material stepper responsive
mat stepper background-color

I am creating a stepper in angular 4. I am not using angular material stepper. I need to change the background color of the stepper depending upon the status that I will receive from API. For example: If the status is "publish", the background color of the first stepper should be orange and if the status is "publishing" then the color of the first stepper should be green and the background color of the second stepper should be orange. It would be great if anyone can help on this.

<ul class="nav nav-tabs" role="tablist">
                <li role="presentation"  *ngFor=" let stepper of stepperBtns">
                  <div>
                    <button  [ngStyle]="{'background-color': getstatusBtnColor()}" [type]="stepper.type" class="round-tab">{{stepper.name}}</button>
                  </div> 
                  
                </li>
              </ul>

Your HTML looks correct to me. However your Typescript function is a little off - you're not getting the value of status from anywhere that I can see.

Try something like:

getstatusBtnColor(status: string) {
  switch(status) {
    case 'publish':
      return 'orange';
    case 'publishing':
      return 'green';

    default:
      return 'red';
  }
}

Then pass your status into the function from the HTML. (I added the default case to help in case the issue is your status not having the correct value)

StackBlitz: https://stackblitz.com/edit/angular-9uuaaj

How to change color of angular material stepper step icons, The background color of this circle is set to whatever the theme's primary color is. There does not seem to be option to change color of mat stepper icon, you Code for Mat-stepper in HTML <mat-step label="Personal Details" state="chat">  This article describes how to change the website background dynamically using AngularJS. In AngularJS there is one directive "ng-style" that can change Cascade Style Sheet (CSS) dynamically as you want at runtime. In this article I am using the example of changing the website background color dynamically at the runtime.

use the style attributes [style.background-color] instead of ngStyle

<button [style.background-color]="getstatusBtnColor()" [type]="stepper.type" class="round-tab">{{stepper.name}}</button>

Creating a custom stepper using the CdkStepper, The CDK stepper allows to build a custom stepper which you can completely style .example-active { color: blue; } .example-step { background: transparent; Therefore we can, for example, add it to our app.component.html and define some  We can set the inline styles of a HTML element using the style binding in angular. The syntax resembles the syntax of the property binding.You can add styles conditionally to an element, hence creating a dynamically styled element.

Your HTML section is right. Please check getstatusBtnColor typescript method. You are not providing last else condition, in-case both top conditions fail. Are your sure status field do have one of these two possible values?? May be try with this

getstatusBtnColor(){
   if (status== 'publish'){
    return 'orange';
  }
  else if (status == 'publishing'){
  return 'green';
  }else{
   return 'blue';  //just to check 'status' value, in case status is neither publish nor publishing
  }
  }

Stepper, For more complex labels, add a template with the matStepLabel directive inside For mat-horizontal-stepper it's possible to define the position of the label. end is attribute of step content is automatically set based on step selection change. Changing button text color when going to the next step should be disabled. It is possible to change the Next/Complete button's text color (together with right chevron's color) when all the criteria to go to the next step are not met. This color should indicate that the user cannot go to next step yet and look as if disabled.

Theming Guide, Finally, MDC Web has a number of text colors, which are used for rendering text and contrast to what's behind them, and have different levels of opacity depending on usage : On-primary, used for text that is on top of a primary background. position: fixed; Step 4: Changing the theme with CSS Custom Properties. In this post, we are going to go through a complete example of how to build a custom dialog using the Angular Material Dialog component. We are going to cover many of the most common use cases that revolve around the Angular Material Dialog, such as: common dialog configuration options,

How to change color of angular material stepper step icons, how to change angular material stepper step numbers to any icon or text The background color of this circle is set to whatever the theme's primary color is. change color with the color palette because this should work according to the docs. Ionic 5|4 Status Bar Config color, hide, overlap using Cordova & Native Plugin. It’s easy to bind inline style in your Angular 2 templates. Here’s how you would bind a single style value for example: <p [style.background-color]="'darkorchid'"> Quite something! </p> You can also specify the unit, here for example we set the unit in em, but px, % or rem could also be used:

Stepper styling is hard coded to anchor tag, Would be helpful if this change is implemented in the master too. content: ''; position: relative; flex: 1; margin: 8px 0 0 0; height: 1px; background-color: rgba(0,​0  Bootstrap Steps (stepper) A Bootstrap stepper is a component that displays content as a process with defined by user milestones. Following steps are separated and connected by buttons. This is a great solution for a variety of registration forms, where you don't want to scare the user with loads of fields and questions.

Comments
  • shouldn't you pass a parameter in getstatusBtnColor() ?? getstatusBtnColor(stepper.status)... inside the TS file, you handle the passed status... getstatusBtnColor(passedStatus){ if (passedStatus== 'publish'){ return 'orange'; } else if (passedStatus == 'publishing'){ return 'green'; } }
  • Hi @8ytan, Thanks you for your reply. But Switch case will not work in my case as the status will be more than one and the status is in separate object. I have tried using a loop and bind the status but it is not working. Stackblitz: stackblitz.com/edit/…
  • @ShradhaMallick Could you provide me with more info about what you're trying to do? The StackBlitz you linked just goes to my original example...
  • Hi @8ytan. please check this url stackblitz.com/edit/…. I want to change the background color of the buttons based on the status.
  • @Shraddh Okay, I see your issue. You seem to be trying to change the colour of the status buttons up top according to the data in the table - what are you trying to achieve? Sorry to keep asking for more info but could you send me a picture of what you want it to look like when it's done?