Angular Material directive to hide element on small/mobile display

Question

Is there an 'angular material way' to hide elements on small/mobile displays using a directive of some kind? Having used Angular and Angular Material for a while now, I thought this should be simple, but I'm just not finding it. I know about the ng-show / ng-hide directives, but I don't know if I can write an expression that inspects the current display size somehow.

Do I just need to fall back to good old media queries in CSS?

EDIT - forgot to include reference to Angular Material in my original post... oops!

Answer 1

You could create a matchMedia filter.

app.filter("matchMedia", function($window) {
    return function matchMedia (mediaQueryString) {
        return $window.matchMedia(mediaQueryString).matches;
    }
});

Then use it in directives:

<div ng-if="'(min-width: 400px)' | matchMedia">
    <h1>The viewport is at least 400 pixels wide</h1>
</div>

Answer 2

https://material.angularjs.org/latest/layout/introduction use hide and show options depends on Breakpoint e.g hide-md, hide-lg

Angular Material Design - Change flex value with screen size