flex-layout within material-toolbar

Question

I'm currently facing a problem with layouting Angular2's material module using flex layouts.

As you're going to see in the example below as well as the attached live version, Angular2's toolbar module seems not to allow flex layouts being placed within an mat-toolbar

<mat-toolbar color="primary">

    <div fxLayout="row" fxLayoutAlign="end">
        <a mat-button fxFlex="auto">Item 1</a>
        <a mat-button fxFlex="auto">Item 2</a>
        <a mat-button fxFlex="auto">Item 3</a>
        <a mat-button fxFlex="auto">Item 4</a>
    </div>

</mat-toolbar>

<div fxLayout="row" fxLayoutAlign="end">
    <a mat-button>Item 1</a>
    <a mat-button>Item 2</a>
    <a mat-button>Item 3</a>
    <a mat-button>Item 4</a>
</div>

Live Example

Editor Version

What I want to achieve is a placement of the buttons aligned on the right side. Outside of mat-toolbar everything works like a charm. Is there anything I'm missing or is that a bug which is rooted in material being still beta?

Answer 1

Oh I'm pretty sure it works, don't worry :)

Simply add fxFlex to your div containing all of your items.

Your issue is that the div isn't taking all the space, making you think it doesn't work.

Also, using the fxFlex property makes your elements take all the width they can, so use it only when a component should take all the remaining space.

Do you want a working blitz or do you want to try it and discover by yourself ?