how to write css for a specific breakpoint in angular material

Question

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.

Answer 1

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 >

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