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

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?

Answer 1

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