NG RESPONSIVE TOOLS

Angular responsive directives for adding class names depending on the device, screen size and other parameters

Features

Base:

• screen breakpoints detection
• screen orientation detection
• device detection
• browser detection
• system detection

Others:

• easy to use
• simply extendable
• live example on StackBlitz

Directives

Screen based directives

• [mediaClass]

Browser based directives

• [chromeClass]
• [firefoxClass]
• [safariClass]
• [operaClass]
• [edgeClass]

System based directives

• [windowsClass]
• [linuxClass]
• [macClass]

Device based directives

• [mobileClass]
• [tabletClass]
• [desktopClass]
• [smarttvClass]

Orientation based directives

• [landscapeClass]
• [portraitClass]

Usage

Installation

npm i ng-responsive-tools

Import

import { ResponsiveModule } from 'ng-responsive-tools';

Import with default settings:

@NgModule({
  imports: [
    ResponsiveModule.forRoot()
  ]
})

Import with custom settings:

@NgModule({
  imports: [
    ResponsiveModule.forRoot({
      xs: 576, // default: 480px
      sm: 640, // default: 768px
      md: 768, // default: 992px
      lg: 992, // default: 1200px
      xl: 1280 // default: 1440px
    })
  ]
})

How to use

<div
  [mediaClass]="{
    common: 'col',
    xs: 'col-12',
    sm: 'col-6',
    md: 'col-4',
    lg: 'col-3',
    xl: 'col-1'
  }">
</div>

Afterword

You should remember that the changing the class of an element causes DOM reflow / layout shift events.

Generally, the every interaction with the DOM will trigger blocking operation. You cannot rule it out altogether, but it should always be kept at a minimum