CODEWITHSUNDEEP
javascriptangularangular-cliangular-material2
Johhan Santana
Johhan Santana

Reputation: 2425

Angular 4 material toolbar color not changing

I'm trying to setup Angular Material for an angular 4 project.

I followed the how to get started guide and pretty much have everything except a few things

  1. Toolbar component doesn't change colors when I add color="primary"
  2. Font family for toolbar doesn't seem right, in fact, I think the css it's trying to fetch is not correct.
  3. Font family for stuff that do not required custom material components are weird

I've setup a simple repository here using angular-cli 1.4.9

Upvotes: 5

Views: 42132

Answers (8)

HibaHasan
HibaHasan

Reputation: 1493

<mat-toolbar color="primary">
  <h1>My Application</h1>
</mat-toolbar>

this should work very fine, don't try to override material styles in any css file, you can of course if you want custom colors or something. to check if everything alright, your project must first of all import angular material and then:

  1. have this in your angular.json file :

        "styles": [
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "src/styles.css"
    ]

of course the style depends on the one ypou chose, for me I chose indigo-pink

  1. import angular material in the component you want to use it inside

    imports: [ MatToolbarModule ]

Upvotes: 0

Kees de Kooter
Kees de Kooter

Reputation: 7195

Verify that the theme CSS is added in angular.json under projects/architect/build/options:

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.less"
],

And rerun ng serve after that.

Upvotes: 1

S J BHAVANA
S J BHAVANA

Reputation: 1481

  <mat-toolbar color="primary">
  <button
    mat-icon-button
    class="cursor-pointer example-icon favorite-icon"
    aria-label="Example icon-button with heart icon"
    (click)="dataStorerService.sidenavOpen = !dataStorerService.sidenavOpen"
  >
    <mat-icon>menu</mat-icon>
  </button>

  <span>Dashboard</span>
  <span class="example-spacer"></span>
</mat-toolbar>

This is my code but the primary color was not getting reflected in the browser. on importing the below in styles.scss file

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

changes started to reflect

Reason for the issue faced: At times while installing Angular material to the project using the command

ng add @angular/material

Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys)

Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ] Deep Purple/Amber [ Preview: https://material.angular.io?theme=deeppurple-amber ]
Pink/Blue Grey [ Preview: https://material.angular.io?theme=pink-bluegrey ] Purple/Green
[ Preview: https://material.angular.io?theme=purple-green ]
Custom

incase if the installing of the theme doesn't happen properly, it might result in this issue as well!

Upvotes: 2

Abhijit Kedare
Abhijit Kedare

Reputation: 181

Add below code in style.css

.mat-toolbar.mat-primary {
  background: #007bff;
  color: #fff;
}

Upvotes: 14

Pran Kumar Sarkar
Pran Kumar Sarkar

Reputation: 1003

No need to add color="primary".

Simply override the color of mat-toolbar in CSS by:

.mat-toolbar {
   background: teal;
   color: #fff
}

To know which CSS class to override, inspect the element in browser and then seeing the underlying CSS classes.

Upvotes: 0

Stephane
Stephane

Reputation: 12790

On a simple app that exercises a library in a multi projects workspace, the toolbar remained not styled with a white background.

I could solve the issue by adding in the styles.scss file, the following import statement:

@import '~@angular/material/prebuilt-themes/indigo-pink.css'

Upvotes: 8

Edric
Edric

Reputation: 26811

  1. There's nothing wrong with your code. Can you check in your DevTools that the mat-primary class is applied to your toolbar?

    UPDATE: It looks like you're missing the module required for mat-toolbar to work. Add MatToolbarModule to your app's module:

    import {
    MatToolbarModule,
    // Other module imports
} from '@angular/material';

@NgModule({
    imports: [
        MatToolbarModule,
        // Other modules go here
    ]
})

  2. That's because you're missing the css for Roboto. Add the import CSS in your app's index.html:

    <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>

  3. You should either add mat-typography style to your body element in index.html:

    <body class="mat-typography">
    <app-root></app-root>
</body>

    Alternatively, add the following style to your styles.scss:

    body {
    font-family: Roboto, sans-serif;
}

Upvotes: 3

nammalvar 2.0
nammalvar 2.0

Reputation: 111

I was able to find only these two:

primary should be defined and exported from the class in app.component.ts

and app.component.scss should be app.component.css.

export class AppComponent {
  title = 'app';
  primary = 'red';
}

and you need to tell angular that you want it to be populated by using {{primary}} in your app.component.html file.

Upvotes: -3

Related Questions