Smart Screen Service

Owned by Radu Nicoara (Unlicensed)
Jun 29, 2017
1 min read

The Smart Screen Service monitors the screen size and publishes changes to subscribers.

The screen sizes are the same as those used by Bootstrap. Possible values are:

  • lg (large, greater than or equal to 1200px)
  • md (medium, greater than or equal to 992px)
  • sm (small, greater than or equal to 768px)
  • xs (extra small, less than 768px)

The service also offers an enum for convenience.

 

Subscribing to screen size change events

The windowSize event argument is of class WindowSize.

import { SmartScreenService, WindowSize, ScreenSize } from '@consultingwerk/smartcomponents-core';
 
constructor(private screenService: SmartScreenService) { }
 
ngOnInit() {
	this.screenService.windowSize.subscribe((screenSize: WindowSize) => {
		switch(screenSize.deviceScreenCategory) {
			case ScreenSize.EXTRA_SMALL:
				alert('For a better viewing experience, please use a wider screen');
				break;
			default:
				...
		}
		console.log(`screen size: ${screenSize.width} x ${screenSize.height} - string: ${screenSize.deviceScreenCategoryString}`);
	});
}

 

Checking if the screen is of a certain size category:

import { SmartScreenService, ScreenSize } from '@consultingwerk/smartcomponents-core';


constructor(private screenService: SmartScreenService) { }
 
ngOnInit() {
	if (this.screenService.isOfSize('lg')) {
		//the screen is large
	}
	//alternative
	if (this.screenService.screenSize.width > 1000) {
		//the screen width is larger than 1000 pixels
	}
}