Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 9
New method to set the custom config:
import { NgModule } from '@angular/core'
import { ResponsiveModule, ResponsiveConfig } from 'ngx-responsive'
...
let config = {
breakPoints: {
xs: {max: 600},
sm: {min: 601, max: 959},
md: {min: 960, max: 1279},
lg: {min: 1280, max: 1919},
xl: {min: 1920}
},
debounceTime: 100 // allow to debounce checking timer
};
export function ResponsiveDefinition(){
return new ResponsiveConfig(config);
};
...
@NgModule({
imports: [
ResponsiveModule
],
declarations: [
AppComponent
],
providers:[{
provide: ResponsiveConfig,
useFactory: ResponsiveDefinition }]
})
export class AppModule { }
import { NgModule } from '@angular/core'
import { ResponsiveModule } from 'ngx-responsive'
...
const config = {
breakPoints: {
xs: {max: 600},
sm: {min: 601, max: 959},
md: {min: 960, max: 1279},
lg: {min: 1280, max: 1919},
xl: {min: 1920}
},
debounceTime: 100
};
...
@NgModule({
imports: [
BrowserModule,
ResponsiveModule.forRoot(config)
],
declarations: [
AppComponent
],
providers:[]
})
export class AppModule { }
Reactive services that expose changes through observables:
Example: We initialize the service and we subscribe to the event changes:
constructor(
public browserInfoRx: BrowserInfoRx
) {}
ngOnInit(): void {
this.browserInfoRx.connect();
}
this.browserInfoRx.getBrowser.subscribe((data) => {
console.log('this.browserInfoRx.getBrowser ===>', data);
}, (err) => {
console.log('Error', err);
});
or :
ngOnInit(): void {
this.browserInfoRx.connect().subscribe((data) => {
console.log('this.browserInfoRx.getBrowser ===>', data);
}, (err) => {
console.log('Error', err);
});
}
ngOnDestroy(): void {
this.browserInfoRx.disconnect();
}
BrowserInfoRx -> getBrowser -> BrowserInfoRx.getBrowser
IeInfoRx -> getIE -> IeInfoRx.getIE
DeviceInfoRx -> getDevice -> DeviceInfoRx.getDevice
DeviceStandardInfoRx -> getStandardDevice -> DeviceStandardInfoRx.getStandardDevice
OrientationInfoRx -> getOrientation -> OrientationInfoRx.getOrientation
ResponsiveSizeInfoRx -> getResponsiveSize -> ResponsiveSizeInfoRx.getResponsiveSize
UserAgentInfoRx -> getUserAgent -> UserAgentInfoRx.getUserAgent