Customize stepper background color in Angular Material based on specific conditions

I am working on a project using Angular Material and I want to dynamically change the color of the stepper based on different states. For example:

state: OK (should be green)
state: REFUSED (should be red)

Here is what I have done so far:

<mat-horizontal-stepper>
                     <mat-step state="schedule">
                        <ng-template matStepLabel>
                            <span [ngClass]="{'ok-step': status == 'OK', 'step-refused': status == 'REFUSED'}" *ngIf="(status == 'OK' || status == 'REFUSED'); else default">
                                {{status}}
                            </span>
                            <ng-template #default>
                                Default state
                            </ng-template>
                        </ng-template>
                    </mat-step>
</mat-horizontal-stepper>

Although I can change the text color dynamically, I am facing an issue with changing the background color of the stepper itself. I have tried this approach:

::ng-deep.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
background-color: #dd2c00 !important
}

However, this method only allows for setting one color at a time. Is there a way to set both red and green depending on the state?

Answer №1

Instead of directly using hex codes for color in your code, consider using variables and setting their values in your .ts file. By doing this, you can dynamically set the background color based on certain conditions.

To implement this solution, update your .scss file with the following code:

::ng-deep.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
   background-color: var(--background)!important
}

In your .ts file, add the following lines of code:

if(status === 'Ok')
{
  document.body.style.setProperty('--background', 'red')
} 
else if(status === 'REFUSED') 
{
  document.body.style.setProperty('--background', 'red')
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Please indicate the number of lines for the href within the span element

I'm struggling with formatting a <span> tag, specifically the .lastMessageLink class that contains an <a> element with the .lastMessageText class. The content within .lastMessageText can vary from just a few characters to a lengthy paragra ...

What is the object pattern in Typescript?

Recently delving into TypeScript, I am eager to learn how to define an interface for the following type of object: const branch = { 'CN': { 'name': 'CN Name', 'branch': 'Chinoise', 'url& ...

Ways to resolve NPM dependency conflicts

Attempting to set up all the necessary npm packages for the AWS sample demo found at https://github.com/aws-samples/amazon-chime-sdk-classroom-demo on my laptop has been a bit challenging. Every time I try to run npm install I can't help but wonder i ...

What are the steps for changing this JavaScript file into TypeScript?

I'm currently in the process of converting this JavaScript file to TypeScript. However, I've encountered an error with the onClick function as shown below: import React from 'react'; import { Popover } from 'antd'; import A fr ...

Attempting to deploy an Angular 9 web project within Visual Studio

Starting my first Angular project has been a smooth process so far. After successfully running "npm start" without any errors, I encountered some issues when launching the application from Visual Studio. Despite sending the same commands, I consistently ...

Can you show me the procedure for retrieving a particular element with selenium? (Page Source provided)

Disclaimer: I must admit that my knowledge of HTML and CSS is minimal, so please bear with me! Hello everyone, I am attempting to utilize selenium[Java] to browse a website and retrieve a file. While I managed to successfully get past the login page, I fi ...

Adjust the size of an image to fit within a set height row using CSS grid

I have a container with fixed width and height where I want to display an image and some text. My goal is to have the text appear first, followed by the image filling up the remaining space in the container. Check out the image below for reference: Exampl ...

Guidelines for utilizing NgFor with Observable and Async Pipe to create Child Component once the data has been loaded

Encountering an issue while attempting to display a child component using data from an Observable in its parent, and then utilizing the async pipe to transform the data into a list of objects for rendering with *NgFor. Here's what I've done: C ...

Is it possible to retrieve the HttpsError status from a Firebase function?

Within my firebase function, I deliberately throw an error with a specific status and message using the following code: throw new functions.https.HttpsError('permission-denied', 'Token does not match'); When I receive the server respo ...

Tips for adding a time increment of 24 hours to a date variable in Angular 6

My goal is to update a date variable called EndDate stored in localStorage by adding exactly 24 hours to it. The current value in the localStorage is Sun Jun 09 2019 20:39:44 GMT+0530 (India Standard Time). var endDate = new Date(); endDate.setDat ...

Iterating over a JSON array using *ngFor

Here is the JSON structure that I have: { "first_name": "Peter", "surname": "Parker", "adresses": { "adress": [{ "info1": "intern", "info2": "bla1" }, { "info1": "extern", "info2": "bla2" }, { "info1": " ...

"Error message: 'ng' command cannot be found even after completing the installation of Node

Recently, I set up a fresh MacOS Catalina operating system on my computer. When I attempted to run my old project using 'ng serve', I encountered the error message 'ng: command not found'. To troubleshoot, I installed npm 6.12.1 via nod ...

Altering the hover functionality for dynamically created class elements

I have a vision to create a unique e-commerce storefront with tile design, featuring an item thumbnail that reveals the item name upon hovering. I found inspiration from this example, but I want the item name to slide up smoothly on hover, rather than simp ...

Leverage a custom server (such as NestJS) within NextJS to dynamically render targeted pages

I am experimenting with using NestJS as a custom server for NextJS, following the instructions in this article. Here is a simplified version of the code: @Controller('/') export class ViewController { @Get('*') async static(@Req() r ...

Achieving the minimum width of a table column in Material-UI

Currently I am in the process of developing a React website with Material-UI. One query that has come up is whether it's feasible to adjust the column width of a table to perfectly fit the data, along with some extra padding on both ends? Outlined be ...

Combining multiple data types in an AJV array

Imagine you have the following defined type: type MixedArray = Array<number | string>; Now, let's say you have some sample data that needs to be validated: [ 'dfdf', 9, 0, 'sdfdsf' ] How can you create an Ajv JSONSchemeType ...

Timer countdown: Looking for a countdown timer that will reset to 3:00 automatically each time it reaches 0 minutes, and can do so

Seeking a continuous countdown timer that starts from 03:00 and counts down to 0:00, then automatically resets back to 03:00, in an infinite loop. The condition is that no one should be able to manually stop this logic. After researching, I found a Ja ...

How to efficiently manage multiple namespaces in Angular with the help of socket.io

I have a scenario where I am working with two clients and have defined static namespaces "/CGI_ONE" and "/CGI_TWO". However, when I connect to "/CGI_TWO", it disconnects the previous socket.io connection. How can I manage both connections in node.js and an ...

Issue: MUI Autocomplete and react-hook-form failing to show the chosen option when using retrieved information

The MUI Autocomplete within a form built using react hook form is causing an issue. While filling out the form, everything works as expected. However, when trying to display the form with pre-fetched data, the Autocomplete only shows the selected option af ...

Determine whether the color is a string ('white' === color? // true, 'bright white gold' === color? // false)

I am facing an issue with multiple color strings retrieved from the database. Each color string needs to be converted to lowercase and then passed as inline styles: const colorPickerItem = color => ( <View style={{backgroundColor: color.toLowerC ...