BeetleJuice BeetleJuice - 2 years ago 171
Sass (Sass) Question

Angular 2: Detect changes in browser width and update model

In my

Angular 2
app, I change styles based on browser window width. Here is a sample (SCSS):

/*styles for narrow screens*/
@media (max-width: 750px){
/*styles for medium screens*/
@media (min-width: 751px) and (max-width: 1200px) {
/*styles for wide screens*/
@media (min-width: 1201px) {

This makes my UI responsive. I'd like my Angular components to know which width interval is current:

/* Returns which of the CSS width intervals is current*/
let pixelWidth = ...; //what goes here?

if(pixelWidth < 251) return "small";
if(pixelWidth < 451) return "medium";
return "large";

A component would call this function and adjust its behavior based on width. For instance, the template below will show more content on wider screens:

{{getWidthRange()==='small'? shortText : longText}}

Even better, I would setup an Observable that emits when the browser transitions from one range to the next:

widthRangeChanges = Observable.create( observer =>
// ? how to detect when width changes
let oldRange = '...';
let newRange = '...';
).share(); //all subscribers share same output channel

The component could then subscribe to
and update model values when a new range is received. How can I get hold of this info in
Angular 2

Angular 2 rc-6
typescript 2.0.2
rxjs 5 beta 11

Answer Source

You can use fromEvent operator of RxJS:

 const $resizeEvent = Observable.fromEvent(window, 'resize')
   .map(() => {
     return document.documentElement.clientWidth;

   $resizeEvent.subscribe(data => {
     this.width = data;

Plunker Example

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download