angular-material2 responsive show/hide

Question

Is it possible to control visibility of element with angular-material2 using

hide-xx  show-xx hide-gt-xx show-gt-xx

i know this is working with angularJS-material.
Code below does not work:

<md-toolbar color="primary">
  <span>Application Title</span>  
  <span class="example-fill-remaining-space"></span>
  <button md-button hide-xs show-gt-xs>Auto hide button</button>  
</md-toolbar>

I use https://github.com/angular/material2 version 2.0.0-beta1

If No, if there is another way to do that without using *ngif and screen resize listeners, or other css frameworks like Bootstrap ?
Also does https://github.com/angular/flex-layout has this possibility by the way?

Solution

I would recommend @angular/flex-layout, as you already mentioned!

It's an additional package - installation needed, it's not a part of angular!

Possible options:

• fxHide
• fxHide.xs
• fxHide.gt-xs
• fxHide.sm
• fxHide.gt-sm
• fxHide.md
• fxHide.gt-md
• fxHide.lg
• fxHide.gt-lg
• fxHide.xl

Usage:

<div fxFlex="60" fxHide.xs></div>

live-demo: https://plnkr.co/edit/yrhaGtFpHOlYYOTqzDDO?p=preview

documentation here:

https://github.com/angular/flex-layout/wiki/API-Documentation

https://github.com/angular/flex-layout/wiki/fxShow-API

https://github.com/angular/flex-layout/wiki/fxHide-API

Comments

[LOTUSMS]

Where is the documentation for this? I hate having to google for every class or feature they already have out of the box

[slaesh]

i guess there is currently only the wiki: github.com/angular/flex-layout/wiki

[LOTUSMS]

Thank you. Your answer should break records soon. It's the only Googled answer thus far

[Ian Poston Framer]

Documentation here: github.com/angular/flex-layout/wiki/API-Documentation github.com/angular/flex-layout/wiki/fxShow-API github.com/angular/flex-layout/wiki/fxHide-API

[Ian Poston Framer]

It should be noted that @angular/flex-layout does not come packaged with angular cli you will have to install it in your app npm install @angular/flex-layout@latest --save and import it in your app.module import { FlexLayoutModule } from '@angular/flex-layout'