CODEWITHSUNDEEP
cssangularjsangular-material
John Rix
John Rix

Reputation: 6693

Angular Material directive to hide element on small/mobile display

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!

Upvotes: 6

Views: 18486

Answers (6)

Abdullah Mahi
Abdullah Mahi

Reputation: 152

  • 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>

Upvotes: 1

Amar T
Amar T

Reputation: 357

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

Upvotes: 2

kTn
kTn

Reputation: 595

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

Upvotes: 4

georgeawg
georgeawg

Reputation: 48968

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>

Upvotes: 7

Denis
Denis

Reputation: 747

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.

Upvotes: 0

Matti Virkkunen
Matti Virkkunen

Reputation: 65126

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.

Upvotes: 1

Related Questions