0

I have just started learning Angular and came across this tutorial on how to use Angular materials side nav bar. However, when I followed the steps in the tutorial, the website displayed did not use CSS.

These were the steps I followed:

  1. Create my Angular application.

  2. Execute ng generate @angular/material:navigation

  3. Import necessary modules in the modules.ts file.

  4. Put <app-nav></app-nav> into the app.component.html file.

And this was the output.

Edit- I even tried copying the contents of main-nav.component.css to the global styles.css as suggested in this Stack Overflow answer, but to no avail.

sriramcu
  • 27
  • 5

1 Answers1

0

You need to add the angular material's prebuilt theme in global style.scss file.

Without this, none of the styles of angular material component would be applied.

Add following line in style.scss file:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';
Drashti Dobariya
  • 2,455
  • 2
  • 10
  • 23
  • Yes, this worked. However, the menu icon (three horizontal lines) is still not being shown, it appears as the text "menu". My code is exactly the same as the tutorial. Is there any other css to be imported? By the way, I am not using scss in my project, only CSS. – sriramcu Jun 29 '21 at 12:23
  • Did you add MatIconModule in app.module file? – Drashti Dobariya Jun 29 '21 at 12:28
  • If yes, then the icon's visibility might be hidden or the color might be same as that of the background color. You will have to inspect the element and check it out. – Drashti Dobariya Jun 29 '21 at 12:33
  • Ok, got it. I had to import a CSS file for the icons as well. https://stackoverflow.com/questions/49796212/angular-material-icons-not-working. Apparently there were quite a few things the tutorial didn't cover. Thanks for the answer. – sriramcu Jun 29 '21 at 13:46