@impactdk/ngx-breakpoints

ngx-breakpoints

This module gives you some tools to subscribe to viewport changes

Configuration

The module acts on certain breakpoints that you provide to it. If you don't provide any breakpoints, the module will fall back to some built-in breakpoints. You should configure the module with your own breakpoints by providing a list of the Breakpoint type:

export const breakpoints: Breakpoints = [
    Breakpoint.fromWidth('small', { maxWidth: 567 }),
    Breakpoint.fromWidth('medium', { minWidth: 568, maxWidth: 767 }),
    Breakpoint.fromWidth('large', { minWidth: 768, maxWidth: 1024 }),
    Breakpoint.fromWidth('xlarge', { minWidth: 1025 }),
    Breakpoint.fromQuery(
        'small retina',
        'only screen and (min-resolution: 192dpi) and (max-width: 567px)'
    ),
    Breakpoint.fromQuery(
        'medium retina',
        'only screen and (min-resolution: 192dpi) and (min-width: 568px) and (max-width: 767px)'
    ),
    Breakpoint.fromQuery(
        'large retina',
        'only screen and (min-resolution: 192dpi) and (min-width: 768px) and (max-width: 1024px)'
    ),
    Breakpoint.fromQuery(
        'xlarge retina',
        'only screen and (min-resolution: 192dpi) and (min-width: 1025px)'
    ),
];

@NgModule({
    imports: [BreakpointsModule.withConfiguration(breakpoints)],
})
class AppModule {}

Additionally you can provide a set of SSR options:

{
    defaultSize {
        width: 375;
        height: 667;
    }
}

Usage

Import the BreakpointService in a component and subscribe to the breakpoint observable:

breakpoint$: Observable that provides you with objects of the type Breakpoint that matches the breakpoints you provided in the configuration.

class Breakpoint {
    name: string;
    mediaQuery: string;
}

Or you can check the viewport size and scrollbar width:

getScrollbarWidth(): The width of the scrollbar in pixels

getSize(): The size in pixels of the viewport represented as a ScreenSize object

class ScreenSize {
    width: number;
    height: number;
}