CODEWITHSUNDEEP
cssangularmouse-cursormat-stepper
gadget-man615
gadget-man615

Reputation: 27

How to disable cursor when hovering over angular component?

I currently have a horizontal mat-stepper component which can be found below;

![enter image description here

The user is currently able to go back to the previous step by clicking the "Back" button OR by clicking the header of each step. I would like to disable the ability to click on the step header to return to the previous step and make it so the only way the user is able to go back to the previous step is by clicking the 'Back' button.

Upon researching, I believe the solution is found in the CSS file, similar to this;

:host ::ng-deep .mat-vertical-stepper-header-container {
    pointer-events: none;
    cursor: not-allowed;
}

:host ::ng-deep .mat-vertical-stepper-header-container .mat-step-header:hover {
    background: inherit;
}

Upvotes: 0

Views: 2617

Answers (1)

gadget-man615
gadget-man615

Reputation: 27

Solution found!

::ng-deep .mat-step-header{
    pointer-events: none !important;
}

Upvotes: 0

Related Questions