New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
Socket
Book a DemoSign in
Socket

ng-media-query

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ng-media-query

Running mediaqueries with angularjs

latest
Source
npmnpm
Version
1.0.3
Version published
Maintainers
1
Created
Source

ng-media-query v1.0.1

Running media queries in Angularjs

Installation

(1) Bower

bower install ng-media-query

(2) NPM

npm install ng-media-query

(3) Manual

Download ng-media-query.js
or       ng-media-query.min.js

Dependencies

angular.js

Inject as dependency

angular.module('yourApp', ['ngMediaQuery']);

Define query parameters

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).

Usage:

use below methods in your controller, refer example

Get current media

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
   });

Get media on change

$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.

Keywords

Angularjs

FAQs

Package last updated on 13 Dec 2015

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts