ssmak / angular-bs4screensize

Get breakpoints information in AngularJS based on Bootstrap 4.

angular-bs4screensize

Get breakpoints information in AngularJS based on Bootstrap 4.

History

Get breakpoints information in AngularJS controller.

Installation + Use

1. Install the npm package

npm install angular-bs4screensize --save

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

3. Add the module as dependency

const ngApp = angular.module('ng-app', ['bs4ScreenSize']);

4. 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();
});

Test

You can find the test page in ./node_modules/angular-bs4screensize/test/index.html

License

MIT