0

I'm having an issue implementing an Angular Material Stepper in my app. The general functionality seems to work fine, validation, not letting the user progress until all fields are completed and general look of the form.

However the stepper text, bubble, highlighted stage and the vertical line between stages is not showing as they should (see images).

How it currently looks...

enter image description here

How it should look...

enter image description here

  • I have read about using ::ng-deep in the scss file but I'm getting an error of "validation css 4.0 - ng-deep is not a valid pseudo element".

  • I placed <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet"> in the head of my index.html too but that doesn't seem to help.

  • I have imported MatStepperModule, FormsModule, ReactiveFormsModule and MatIconModule in my component.module.ts and have BrowserAnimationsModule in my app.module.ts & all under imports[]

Broad question but is there anything I could be missing?

Robgit28
  • 268
  • 4
  • 18
  • Angular Material was added in one of the apps (we have 2). I simply added it via package.json and rebuilt it. You may be correct - I will read the docs & report back. – Robgit28 Jun 28 '21 at 09:09
  • I think you're right as I don't have an angular.json file in this particular app to add the styles to & I haven't been able to find any other reason for the issue. I will simply design it myself. Happy to accept your answer as accepted if you like/submit it? – Robgit28 Jun 28 '21 at 09:36

0 Answers0