# angular-bs4screensize

> Get breakpoints information in AngularJS based on Bootstrap 4.

Latest version **1.2.4** (published 2019-05-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-bs4screensize
pnpm add angular-bs4screensize
yarn add angular-bs4screensize
bun add angular-bs4screensize
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.4 |
| Published | 2019-05-08 |
| First published | 2018-07-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | ssmak |
| Keywords | angularjs, bootstrap, bootstrap4, screen size, breakpoint, media query |

## Links

- npm: https://www.npmjs.com/package/angular-bs4screensize
- Repository: https://github.com/ssmak/angular-bs4screensize
- Homepage: https://github.com/ssmak/angular-bs4screensize#readme
- Issues: https://github.com/ssmak/angular-bs4screensize/issues
- npm.io page: https://npm.io/package/angular-bs4screensize

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.2.4 (latest) — 2019-05-08
- 1.2.2 — 2018-11-06
- 1.2.1 — 2018-11-06
- 1.2.0 — 2018-07-24

## README

<h1 align="center">angular-bs4screensize</h1>

<h5 align="center">Get breakpoints information in AngularJS based on Bootstrap 4.
</h5>
<br />
<div align="center">
  <a href="https://github.com/ssmak/angular-bs4screensize">
    <img src="https://img.shields.io/badge/version-v1.2.4-blueviolet.svg" />
  </a>
  <a href="https://www.npmjs.com/package/angular-bs4screensize">
    <img src="https://img.shields.io/badge/env-angularjs-orange.svg" />
  </a>
</div>
<br />

## History
Get breakpoints information in AngularJS controller.
<br />
<div align="center">
  <a href="https://paypal.me/ssmak">
    <img src="https://img.shields.io/badge/Donate-PayPal-green.svg" alt="PayPal Donation" />
  </a>
  <br />
  <a href="https://paypal.me/ssmak">
    <img src="https://www.paypalobjects.com/webstatic/mktg/logo/AM_mc_vs_dc_ae.jpg" alt="PayPal" />
  </a>
</div>

## Installation + Use
1. Install the npm package
``` bash
npm install angular-bs4screensize --save
```

2. Add the script tag below the official AngularJS library
```html
<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
```html
const ngApp = angular.module('ng-app', ['bs4ScreenSize']);
```

4. Inject to your root controller
```html
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

---
_Source: https://npm.io/package/angular-bs4screensize · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._