Custom BreakPoints Service with Custom values based on Angular BreakpointObserver
Report Bug
·
Request Feature
-
Custom BreakPoints Service with Custom values based on Angular BreakpointObserver
-
This is for helping to modify&extend const values in CDK breakpints.ts which cannot be motified as wish.
-
This helper service aims to support almost all available screens such as XXSmall&Watch and Large SmartHomeTV.
-
For the original breakpoint information, check at https://github.com/angular/components/blob/master/src/cdk/layout/breakpoints.ts
This library compiled with Ivy version, not View Engine. You may need to enable Ivy to use this library.
Read more here: https://v9.angular.io/guide/ivy#maintaining-library-compatibility
To use @fullstackship/responsive-layout in your project install it via npm:
npm i @fullstackship/responsive-layout --save
Import the library module and add it in AppModule or some SharedModule
import { ResponsiveLayoutModule } from '@fullstackship/responsive-layout';To use it, import ResponsiveLayoutService in a component.
import { ResponsiveLayoutService, BreakPointsEX } from '@fullstackship/responsive-layout';
constructor(
private layoutSV: ResponsiveLayoutService
) {
}You can subscribe the BreakPoints. The following is an example how to change SideNav's Width dynamically using this library.
this.layoutChanges = this.layoutSV.observeBreakpoints().pipe(
).subscribe(
result => {
console.log(" ==> AppLayoutComponent|result: ", result);
this.isXSmall = this.isSmall = this.isMedium = this.isLarge = this.isXLarge = false;
for (let matchedBP of result) {
if (matchedBP === BreakPointsEX.XSmall) {
this.isXSmall = true;
// this._sideNavWidth$.next('50px');
} else if (matchedBP === BreakPointsEX.Small) {
this._sideNavWidth$.next('90px');
} else if (matchedBP === BreakPointsEX.Medium) {
this._sideNavWidth$.next('200px');
} else if (matchedBP === BreakPointsEX.Large) {
this._sideNavWidth$.next('250px');
} else if (matchedBP === BreakPointsEX.XLarge) {
this._sideNavWidth$.next('300px');
} else if (matchedBP === BreakPointsEX.XXLarge) {
this._sideNavWidth$.next('300px');
}
}
}
);The BreakPointEX constants are defined like the following :
export const BreakPointsEX = {
XXSmall: "XXSmall",
XSmall: "XSmall",
Small: "Small",
Medium: "Medium",
Large: "Large",
XLarge: "XLarge",
XXLarge: "XXLarge",
Watch: "Watch",
Handset: "Handset",
Tablet: "Tablet",
Web: "Web",
SmartTV: "SmartTV",
HandsetPortrait: "HandsetPortrait",
TabletPortrait: "TabletPortrait",
WebPortrait: "WebPortrait",
HandsetLandscape: "HandsetLandscape",
TabletLandscape: "TabletLandscape",
WebLandscape: "WebLandscape"
};- User-defined custom breakpoints
Distributed under the MIT License. See LICENSE for more information.