how to write css for a specific breakpoint in angular material

angularjs responsive-design material-design angularjs-material
Tarun picture Tarun · Jun 17, 2015 · Viewed 9k times · Source

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

Rob picture Rob · Jun 19, 2015

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 >

Related questions

How to create a responsive (varying column count) Angular-Material card grid

I'm trying to create a grid of Angular-Material cards that behaves somewhat like a Bootstrap grid. Ideally, cards will be full-width for small screen widths and jump to two columns at larger breakpoints. Demo with 2 cards The problem is that …

Read More
if else statement in AngularJS templates

I want to do a condition in an AngularJS template. I fetch a video list from the Youtube API. Some of the videos are in 16:9 ratio and some are in 4:3 ratio. I want to make a condition like this: if …

Read More
How do I use $scope.$watch and $scope.$apply in AngularJS?

I don't understand how to use $scope.$watch and $scope.$apply. The official documentation isn't helpful. What I don't understand specifically: Are they connected to the DOM? How can I update DOM changes to the model? What is the connection …

Read More