Can you use ng-if for display size

Question

Is it possible to use ng-if to very simply not load an element for smaller screen sizes?

Answer 1

You can use angular-match-media for that.

In your controller you can create variables that correspond to screen sizes. For example add the following to your controller:

// Using static method `is`
angular.module('myApp', ['matchMedia'])
.controller('mainController', ['screenSize', function(screenSize) {
  $scope.isScreenSize = screenSize.is;
}]);

Then in your HTML you can show or hide content using ngIf or similar directives that take an Angular expression:

<img ng-if="isScreenSize('md, lg')" ng-src='http://example.com/path/to/giant/image.jpg'>

This particular example is great for only loading large, unnecessary images on desktop computers.

Note: It's important if you plan on using screensize.is() in directives to assign its return value to a scoped variable. If you don't, it will only be evaluated once and will not update if the window is resized or if a mobile device is turned sideways.

Answer 2

An alternative to ng-if, is if you are using Angular Material for your layout they provide directives hide and show to control visibility of elements based on screen size.

For example:

<div hide-gt-sm>You'll only see me on small screens</div>
<div show-gt-lg>You'll only see me on big screens</div>

Docs:

https://material.angularjs.org/latest/layout/options