flexLayout in Angular Toolbar<mat-toolbar>

Question

I am using flexLayout in my angular 5 app. This is code below. As you can see, I want to use flex layout inside mat-toolbar and with the buttons. But i am not getting the desired output. Please see the screenshot attached below for the result.

<mat-toolbar color="primary">
  <div fxLayout="row">
    <div fxFlex="25%">
        <button mat-raised-button color="primary">
            <b>Home</b>
          </button>
    </div>
    <div fxFlex="25%">
        <button mat-button>
            <mat-icon svgIcon="navigation:ic_menu_24px"></mat-icon>
          </button>
    </div>
    <h1 fxFlex="25%">Dashboard</h1>
    <div fxFlex="25%">
        <button mat-raised-button color="primary">
            <b>Add App</b>
          </button>
    </div>
  </div>
</mat-toolbar>

This is how it looks

EDIT: Included app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AppMaterialModule } from './app-material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToolbarComponent } from './toolbar/toolbar.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    ToolbarComponent
  ],
  imports: [
    BrowserModule,    
    AppMaterialModule,
    FlexLayoutModule,
    BrowserAnimationsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Please help.

Thanks

Answer 1

If you will add mat-toolbar-row instead of div, it works

  <mat-toolbar color="primary">
      <mat-toolbar-row>
        <div fxFlex="25%">
            <button mat-raised-button color="primary">
                <b>Home</b>
              </button>
        </div>
        <div fxFlex="25%">
            <button mat-button>
                <mat-icon svgIcon="navigation:ic_menu_24px"></mat-icon>
              </button>
        </div>
        <h1 fxFlex="25%">Dashboard</h1>
        <div fxFlex="25%">
            <button mat-raised-button color="primary">
                <b>Add App</b>
              </button>
        </div>
     </mat-toolbar-row>
    </mat-toolbar>