Running mediaqueries with angularjs
npm install ng-media-query#### Running media queries in Angularjs
(1) Bower
>
``html`
bower install ng-media-query
(2) NPM
>
`html`
npm install ng-media-query
(3) Manual
>
`html`
Download ng-media-query.js
or ng-media-query.min.js
>
`html`
angular.js
>
`html`
angular.module('yourApp', ['ngMediaQuery']);
>
`html`
angular.module('yourApp').value('media', {
'xs': [-1, 767],
'sm': [768, 991],
'md': [992, 1199],
'lg': [1200, -1]
});
#### Set 'device key':[minwidth, maxwidth]
#### Use -1 for no limit.
#### The key value for media can be changed as per the requirement.
#### The response will be the provided key (eg. xs).
>
`html`
var getMedia = NgMediaQuery.getMedia();
getMedia.then(function(data){
$scope.media = data;
}, function(status){
// this returns the current media value, initial setting can be set here
});
>
`html``
$scope.$on('MediaChange', function(event, media){
$scope.media = media;
//this is the onchage media, whenever browser is resized or orientation is changed this function is called, set media change functionalities here
});
#### Feel free for your suggestions and comments.
#### Please let us know if you need any extra functionalities to be added, we will keep providing examples.