Get breakpoints information in AngularJS controller.
- Install the npm package
npm install angular-bs4screensize --save
- Add the script tag below the official AngularJS library
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="./node_modules/angular-bs4screensize/dist/bs4screensize.min.js"></script>
- Add the module as dependency
const ngApp = angular.module('ng-app', ['bs4ScreenSize']);
- Inject to your root controller
ngApp.controller('ng-ctrl', ($scope, $window, bs4ScreenSize) => {
$scope.screenInfo = {
width: null,
breakpoint: null
};
$window.addEventListener('resize', () => {
$scope.updateScreenSize();
$scope.$apply();
});
$scope.updateScreenSize = () => {
$scope.screenInfo.breakpoint = bs4ScreenSize.getState();
$scope.screenInfo.width = bs4ScreenSize.getWidth();
}
// Initialize
$scope.updateScreenSize();
});
You can find the test page in ./node_modules/angular-bs4screensize/test/index.html
MIT