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 with default settings:
Import with custom settings:
How to use
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