DEV Community

loading...
Cover image for The lowly Interface

The lowly Interface

jwp profile image John Peters ・1 min read

We want to hook up window resize events easily. So we create this function.

import { Subject } from 'rxjs';
interface wh {
  width: string;
  height: string;
}
const sub = new Subject<wh>();
export function _resizeEvent(): Subject<wh> {
  debugger;
  window.addEventListener('resize', (ev) => {
    let window = ev.target as Window;
    let ele = window.document.activeElement as HTMLElement;
    let width = ele.offsetWidth.toString();
    let height = ele.offsetHeight.toString();
    sub.next({ width: width, height: height });
  });
  return sub;
}
Enter fullscreen mode Exit fullscreen mode

To use the code above:

import { _resizeEvent } from './functions/observers';

_resizeEvent().subscribe(result=>{
       this.width=result.width;
    }); 
Enter fullscreen mode Exit fullscreen mode

Intellisense now shows us both properties as we type.

Alt Text

Note that interface definitions, unlike class definitions do not support the new keyword. This is pretty much the only difference between the two.

Discussion (0)

pic
Editor guide