angular-responsive-breakpoints-bootstrap-4 v1.1.0

angular-responsive-breakpoints-bootstrap-4

Is a fork of https://github.com/keenondrums/angular-responsive-breakpoints library, which changes it's behavior to be like Bootstrap's 4 media-breakpoint-up mixin. Apart from that, this is still a small lightweight angular service, providing a customizable set of screen breakpoints.

Install

NPM

npm install --save angular-responsive-breakpoints-bootstrap-4

Usage

• Add 'ngResponsiveBreakpoints' to you modules

angular.module('myApp', ['ngResponsiveBreakpoints']);

• Inject 'responsiveBreakpoints' in your controller and you are ready to go.

angular.module('myApp').controller('MyController', ['$scope','responsiveBreakpoints', MyController]);

function MyController($scope, responsiveBreakpoints) {
    $scope.screen = responsiveBreakpoints;
}


<div ng-show="screen.md"></div>

Description

The service watches your window size and sets its keys by the following rules:

• responsiveBreakpointsbreakpoint.code is true if window.innerWidth >= breakpoint.value and window.innerWidth < nextBreakpoint.value (if it exists)
• responsiveBreakpointsbreakpoint.code + postfix is true if window.innerWidth > breakpoint.value

Example

responsiveBreakpoints.xs is true if window.innerWidth < 576px responsiveBreakpoints.md is true if window.innerWidth < 992px and window.innerWidth >= 768px responsiveBreakpoints.smUp is true if window.innerWidth >= 576px

Customize breakpoints and postfix

By default the breakpoint set is a collection in a format of:

[
    {
        code: 'xs',
        value: 0
    },
    {
        code: 'sm',
        value: 576
    },
    {
        code: 'md',
        value: 768
    },
    {
        code: 'lg',
        value: 992
    },
    {
        code: 'xl',
        value: 1200
    }
]

Default postfix is 'Up'

In order to override it inject 'responsiveBreakpointsProvider' in your config

angular.module('myApp').config(['responsiveBreakpointsProvider', config]);

function config(responsiveBreakpointsProvider) {
    responsiveBreakpointsProvider.setResponsiveBreakpoints(/* pass your collection of breakpoints in ascending order here */);
    responsiveBreakpointsProvider.setGreaterPostfix(/* pass your postfix here */);
}