Angular responsive directives for adding class names depending on the device, screen size and other parameters
Base:
- screen breakpoints detection
- screen orientation detection
- device detection
- browser detection
- system detection
Others:
- easy to use
- simply extendable
- live example on StackBlitz
[mediaClass]
[chromeClass]
[firefoxClass]
[safariClass]
[operaClass]
[edgeClass]
[windowsClass]
[linuxClass]
[macClass]
[mobileClass]
[tabletClass]
[desktopClass]
[smarttvClass]
[landscapeClass]
[portraitClass]
npm i ng-responsive-tools
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
})
]
})
<div
[mediaClass]="{
common: 'col',
xs: 'col-12',
sm: 'col-6',
md: 'col-4',
lg: 'col-3',
xl: 'col-1'
}">
</div>
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