Customizing Mat Horizontal Stepper Icons with Unique Background Colors in Angular Material

Question

Customizing Mat Horizontal Stepper Icons with Unique Background Colors in Angular Material

I'm having trouble customizing the colors of the icons

In my mat-horizontal-stepper, I have five mat-steps (Part A, Part B ... Part E), each needing a different color based on certain business rules.

While I can change the color for all steps or the "selected" step, I can't seem to figure out how to dynamically change the icon background color for each individual part. I am using Angular v7.

The following CSS snippet sets the third mat-step icon's background color to green. It works, but I need to know how to change this color dynamically at run-time from the component (typescript).

::ng-deep .mat-step-header:nth-of-type(3) .mat-step-icon {
    background-color: green!important; 
}

I also attempted to use [ngClass], but it is ignored when added as a mat-step attribute. It only applies if I include it within the step label, which doesn't meet the requirement of changing the icon's background color instead of the labels.

Expected outcome: Being able to assign different colors to each step based on completion level, such as yellow, red, green, and black.

Current issue: Unable to dynamically adjust icon colors based on component variable settings

css angular typescript angular-material angular-material-stepper

Answer 1

Answer №1

This particular query revolves around the management of CSS variables through TypeScript - I received assistance from this specific post.

CSS: We linked three variables to three icons that required coloring.
HTML: Two divs, firstClass and secondClass, were established alongside the <body> tag for assigning uniquely named variables such as color1, color2, and color3.
Given our usage of 'mat-table,' using [ngStyle] or [ngClass] isn't viable since the material components are generated at runtime. Thus, we exclusively manipulate them in the AfterViewInit event where values are allocated to the two divs and the <body> tag.

Important CSS:

::ng-deep .mat-step-header:nth-of-type(1) .mat-step-icon {
    background-color: var(--my-var1);
 } 

::ng-deep .mat-step-header:nth-of-type(2) .mat-step-icon {
    background-color: var(--my-var2);
 } 

::ng-deep .mat-step-header:nth-of-type(3) .mat-step-icon {
    background-color: var(--my-var3);
 }

Important HTML:

<div class='firstClass'>
    <div class='secondClass'>
        <mat-horizontal-stepper labelPosition="bottom" #stepper>
            <mat-step [stepControl]="firstFormGroup">
                <form [formGroup]="firstFormGroup">
                    <ng-template matStepLabel>Fill out your name</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>
        </form>
    </mat-step>
    <mat-step [stepControl]="secondFormGroup" optional>
        <form [formGroup]="secondFormGroup">
            <ng-template matStepLabel>Fill out your address</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>
  <div>
<div>

Important TS:

import {Component, OnInit, AfterViewInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'stepper-label-position-bottom-example',
  templateUrl: 'stepper-label-position-bottom-example.html',
  styleUrls: ['stepper-label-position-bottom-example.css'],
})
export class StepperLabelPositionBottomExample implements OnInit, AfterViewInit {
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  color1:string = 'green';
  color2:string = 'yellow';
  color3:string = 'red';

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
  }

  ngAfterViewInit(){
    document.querySelector("body").style.cssText = "--my-var1: "+this.color1;
    (<HTMLElement>document.querySelector('.secondClass')).style.cssText = "--my-var2: "+this.color2;
    (<HTMLElement>document.querySelector('.firstClass')).style.cssText = "--my-var3: "+this.color3;
  }

}

Check out the full live example on StackBlitz here.

Answer 2

This particular query revolves around the management of CSS variables through TypeScript - I received assistance from this specific post.

CSS: We linked three variables to three icons that required coloring.
HTML: Two divs, firstClass and secondClass, were established alongside the <body> tag for assigning uniquely named variables such as color1, color2, and color3.
Given our usage of 'mat-table,' using [ngStyle] or [ngClass] isn't viable since the material components are generated at runtime. Thus, we exclusively manipulate them in the AfterViewInit event where values are allocated to the two divs and the <body> tag.

Important CSS:

::ng-deep .mat-step-header:nth-of-type(1) .mat-step-icon {
    background-color: var(--my-var1);
 } 

::ng-deep .mat-step-header:nth-of-type(2) .mat-step-icon {
    background-color: var(--my-var2);
 } 

::ng-deep .mat-step-header:nth-of-type(3) .mat-step-icon {
    background-color: var(--my-var3);
 }

Important HTML:

<div class='firstClass'>
    <div class='secondClass'>
        <mat-horizontal-stepper labelPosition="bottom" #stepper>
            <mat-step [stepControl]="firstFormGroup">
                <form [formGroup]="firstFormGroup">
                    <ng-template matStepLabel>Fill out your name</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>
        </form>
    </mat-step>
    <mat-step [stepControl]="secondFormGroup" optional>
        <form [formGroup]="secondFormGroup">
            <ng-template matStepLabel>Fill out your address</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>
  <div>
<div>

Important TS:

import {Component, OnInit, AfterViewInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'stepper-label-position-bottom-example',
  templateUrl: 'stepper-label-position-bottom-example.html',
  styleUrls: ['stepper-label-position-bottom-example.css'],
})
export class StepperLabelPositionBottomExample implements OnInit, AfterViewInit {
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  color1:string = 'green';
  color2:string = 'yellow';
  color3:string = 'red';

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
  }

  ngAfterViewInit(){
    document.querySelector("body").style.cssText = "--my-var1: "+this.color1;
    (<HTMLElement>document.querySelector('.secondClass')).style.cssText = "--my-var2: "+this.color2;
    (<HTMLElement>document.querySelector('.firstClass')).style.cssText = "--my-var3: "+this.color3;
  }

}

Check out the full live example on StackBlitz here.

Customizing Mat Horizontal Stepper Icons with Unique Background Colors in Angular Material

Answer №1

Similar questions

Accessing information independent of Observable data in TypeScript

Is there a way to efficiently access checkboxes by their IDs and toggle classes without the need for redundant classes and functions?

Pause the event listener temporarily and reattach it after specific actions have been completed

Is it possible to eliminate the border of an HTML element when clicked, while still keeping the border intact when the element is in

Picture inside text area covering drop-down list

What is the process for spinning an image?

Managing business logic in an observable callback in Angular with TypeScript - what's the best approach?

Troubleshooting HTML Label Problems

Transforming a current angular 2 project to incorporate angular CLI

Incorporating an external SVG file into an Angular project and enhancing a particular SVG element within the SVG with an Angular Material Tooltip, all from a TypeScript file

Tips for creating a more condensed materialized table with form elements

Using the flex:1 property does not automatically make my elements the same size and cover the entire height of the container

Traversing Abstract Syntax Trees Recursively using TypeScript

Underscore.js is failing to accurately filter out duplicates with _uniq

Thumbnails failing to line up in a continuous row

Is it possible to utilize the $ symbol within the ngOnInit or constructor functions?

Ways to loop through a collection of indexed elements

Is there a way for TS-Node to utilize type definitions from the `vite-env.d.ts` file?

Ways to invoke a function in Angular2 when the Boolean condition is met

Error message: While running in JEST, the airtable code encountered a TypeError stating that it cannot read the 'bind' property of an