Angular material stepper header horizontal line and bottom border css

Question

I want to implement angular material stepper as per attached screenshot where the horizontal line has some different css on edit state and when its completed then its different.

and on edit state, there is bottom line which I need to show.

Answer 1

we can get the event form selectionChange method of stepper:

selectionChange(event) {
    if (event.selectedIndex > 0) {
        const stepper = document.getElementsByClassName('mat-stepper-horizontal-line');
        stepper[event.selectedIndex - 1].classList.add('editState');
        for (let i = 0; i < event.previouslySelectedIndex; i++) {
            stepper[i].classList.add('completedState');
            stepper[i].classList.remove('editState');
        }
    }
}