16

I am trying to write CSS for a div, that should apply only when a particular breakpoint is hit, eg. sm, md or lg.

I'm using angular-material (https://material.angularjs.org).

I know that this can be done using media queries @media (max-width: 480px) { ... } but i'm looking for a angular-material way of doing this.

Splaktar
  • 5,506
  • 5
  • 43
  • 74
Tarun
  • 2,808
  • 3
  • 22
  • 21

2 Answers2

24

I'm using the $mdMedia service for that, see:

https://material.angularjs.org/latest/#/api/material.core/service/$mdMedia

Additionally you can use it in a template directly e.g. with an ng-class directive:

// In your controller: 
$scope.$mdMedia = $mdMedia;

// In your template: 
<div ng-class="{sm: $mdMedia('sm'), md: $mdMedia('md'), lg: $mdMedia('lg')}">...</div >
Rob
  • 5,353
  • 33
  • 34
  • I have been including MaterializeCss implementation instead of Responsive Tables when it comes to using angular-material. Good pro tip! – Eric Bishard Feb 01 '16 at 02:26
2

Adding custom css to a tag using material breakpoints, Say suppose i have a custom css like below:

.textLeft{
text-align: left;
margin-left: 24%;
}

and you wanted to add it to a h3 tag if it is a not a mobile device, then follow the below steps.
1. Add ngMaterial to module. 

var app = angular.module('MyApp',['ngMaterial']);

2. inject $mdMedia to controller 

app.controller('TabCtrl', ['$scope','$mdMedia', function($scope,$mdMedia){
  var thisCtrl = this;
  $scope.$mdMedia = $mdMedia;
}]);

3. Now use the $mdMedia as described by Rob earlier: 

<div ng-controller="TabCtrl" layout="column">   
<h3 ng-class="{'textLeft' : $mdMedia('gt-sm')}">
                        {{user.name}}</h3>
</div>
vijay
  • 609
  • 5
  • 9