@Al00X/Screen-Detector
🖨️ Get your device screen type reactively! in Angular.
✅ Setup:
Install using your preferred package manager:
npm i @al00x/screen-detector
✨ Usage:
ScreenDetectorService
it's what you need!
<div *ngIf="screenDetector.isDesktop$ | async">
Render when reached desktop breakpoint
</div>
<!-- The below *ngIf condition, it's always true -->
<ng-container *ngIf="{isXL: screenDetector.xl$ | async} as device">
XL Breakpoint? {{ device.isXL ? 'YES' : 'NO'}}
</ng-container>
There's 5 different breakpoint types, also with utility: isDesktop
and state
.
⚙️ Config:
You can config screen detector for more customization by providing ALX_SCREEN_DETECTOR_CONFIG
in AppModule.
// app.module.ts
@NgModule({
...,
providers: [
{
provide: ALX_SCREEN_DETECTOR_CONFIG,
useValue: {
...,
// The breakpoints below are the default values that are the same as default TailwindCSS breakpoints.
breakpoints: {
xxl: 1536,
xl: 1280,
lg: 1024,
md: 768,
sm: 640,
}
} as AlxScreenDetectorConfig
}
],
})
export class AppModule { }
Config Options:
property | default | description |
---|---|---|
desktopBreakpoint: 'xxl' | 'xl' | 'lg' | 'md' | 'sm' |
'lg' | You can set at which breakpoint, the screen is considered as desktop |
resizeDebounceTime: number |
25 | Screen resize event debounce time in milliseconds (affects performance) |
breakpoints: BreakpointsConfig |
In the example above | Describe each breakpoint's pixels |