2

Hi I am trying to use the angular material in my project. This is the code which i have written in html file.

Here i am trying to use mat-grid in mat-toolbar

<mat-toolbar color="primary">
  <mat-grid-list cols="3">
    <mat-grid-tile>
      left
    </mat-grid-tile>
    <mat-grid-tile>
      center
    </mat-grid-tile>
    <mat-grid-tile>
      right
    </mat-grid-tile>
  </mat-grid-list>
</mat-toolbar>

I have alredy imported both MatToolbarModule, MatGridListModule in app module and there is no error in console. I am not able to see any text in toolbar. can any one help?

Abhishek Gangwar
  • 2,168
  • 18
  • 26
  • Are you using any bootstrap layouting? I had the same problem and realized putting the grid list inside a 'row' caused it – Amen Jun 28 '18 at 16:58

2 Answers2

0

Did you include a default theme ? see docs

add @import "~@angular/material/prebuilt-themes/indigo-pink.css"; to your styles.css file and your toolbar should show.

I also think a mat-grid-list is not allowed inside a mat-toolbar

Tim Martens
  • 1,464
  • 9
  • 18
  • 1
    Yes, I added the default theme. So if we are not allowed to use mat-grid-list in mat-toolbar. Then how can I customize my toolbar? Like adding buttons and search bar, text logo etc. – Abhishek Gangwar May 29 '18 at 12:42
  • you can use flex-layout. https://github.com/angular/material2/issues/4283 – Tim Martens May 29 '18 at 12:56
0

I had the same problem.

Try this thread.

Create a Responsive Toolbar using Angular Material

Monkey D. Luffy
  • 181
  • 1
  • 3
  • 16