how to add a red dot on a mat step header icon in angular 7?

Question

i want to add a red dot on the angular material stepper head icon only if there is any error in form field of that mat step. for that i tried to add div inside the stepper class but it doesn't take effect. atleast i want to know about to add div dynamically using class.

<mat-step-header class="mat-horizontal-stepper-header mat-step-header ng-tns-c10-1 ng-star-inserted" role="tab"
    ng-reflect-state="number" ng-reflect-label="Basic Information" ng-reflect-icon-overrides="[object Object]"
    ng-reflect-index="0" ng-reflect-selected="true" ng-reflect-active="true" ng-reflect-optional="false" tabindex="0"
    id="cdk-step-label-0-0" aria-posinset="1" aria-setsize="2" aria-controls="cdk-step-content-0-0"
    aria-selected="true">
    <div class="mat-step-header-ripple mat-ripple" mat-ripple="" ng-reflect-trigger="[object HTMLElement]"></div>
    <div class="mat-step-icon-state-number mat-step-icon mat-step-icon-selected">
        <div class="mat-step-icon-content" ng-reflect-ng-switch="false">
            <span class="ng-star-inserted">1</span>
        </div>
    </div>
    <div class="mat-step-label mat-step-label-active mat-step-label-selected">
        <div class="mat-step-text-label ng-star-inserted">Basic Information</div>
    </div>
</mat-step-header>

Prashant Pimpale Prashant Pimpale · Accepted Answer · 2020-01-01T05:43:04

You can use formgroup.valid property which returns a boolean value based on the form validity and with the help of ngClass you can set the success or error class.

Related HTML:

<ng-template matStepLabel>
  <div [ngClass]="firstFormGroup.valid ? 'suc' : 'err'">
    {{firstFormGroup.valid}}
  </div>
</ng-template>

CSS:

.err {
  background-color: red;
}

.suc {
  background-color: green;
}

Here is a working Demo

how to add a red dot on a mat step header icon in angular 7?

1 Answers