angular-bs4screensize

    1.2.4 • Public • Published

    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
    1. 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>
    1. Add the module as dependency
    const ngApp = angular.module('ng-app', ['bs4ScreenSize']);
    1. 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

    Install

    npm i angular-bs4screensize

    DownloadsWeekly Downloads

    5

    Version

    1.2.4

    License

    MIT

    Unpacked Size

    15.1 kB

    Total Files

    13

    Last publish

    Collaborators

    • ssmak