6

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!

John Rix
  • 6,271
  • 5
  • 40
  • 46
  • Is there a particular reason for not doing it with CSS which is more suited for this? – Matti Virkkunen Feb 23 '16 at 23:19
  • I would use CSS queries for this unless you go down the path of JS to match user agent strings. – Carlton Feb 23 '16 at 23:20
  • You could use `ng-show`. – Aer0 Feb 23 '16 at 23:20
  • @Matti, not a strong reason - just that Angular provides a lot of styling out of the box, and so it seems reasonable to try to use that where practical, rather than writing my own CSS rules. I thought this would be a case that Angular would have covered. – John Rix Feb 23 '16 at 23:23
  • an other option for "angular way" is to use Angular Material as UI framework https://material.angularjs.org/latest/layout/options but that could be a bit overkill for one simple task – JanisP Feb 23 '16 at 23:24
  • @JohnRix: What styling does Angular provide out of the box? As far as I can remember at least Angular 1.x is just JavaScript and no styles at all. – Matti Virkkunen Feb 23 '16 at 23:27
  • @Matti, my sincere apologies - in an apparent fit of lunacy, I neglected to include reference to Angular Material in my question! This obviously pivots the question significantly, so I'll revise accordingly. – John Rix Feb 23 '16 at 23:54

6 Answers6

7

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>
georgeawg
  • 48,608
  • 13
  • 72
  • 95
  • Clever trick, @georgeawg. I ended up using it with a max-width: 320px DIV and a max-width: 766px DIV to hide/show a specific kind of touchscreen button on mobile devices. Thanks! – RoboBear Mar 22 '17 at 05:44
4

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

Community
  • 1
  • 1
kTn
  • 585
  • 3
  • 10
2

Use hide-sm css class. This class is provided by angular material

Amar T
  • 359
  • 1
  • 7
1

Modern browsers support the matchMedia function that lets you do media queries from JavaScript. You could make a custom directive that uses that.

I suggest doing this only if hiding things via JavaScript (probably more ng-if style rather than ng-show style) allows you to skip processing something unneeded and heavy in JavaScript on mobile browsers. If it's just a visual thing, use CSS. It's the correct tool for the job.

Matti Virkkunen
  • 63,558
  • 9
  • 127
  • 159
0

I think the best way is to use a component approach and keep directive's js + html + scss in one folder. Use scss (or less or sass) to declare your css styles. Doing that you can create media query in directive's scss and then use it in directive's html. And then you collect every directive's scss partials in one file. So you separate your concerns. Logic and presentation in js and html. And leave browser decide whether to display your directive depending on screen size.

Denis
  • 747
  • 4
  • 13
0

  • For Mobile Device (max-widht:599px) use fxHide.xs in this element.

  • For Tab Device (max-widht:959px) use "fxHide.sm"

Example :

<h2 fxHide.xs> Hide this h2 element in mobile device </h2>
Abdullah Mahi
  • 132
  • 1
  • 6