DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for The lowly Interface
John Peters
John Peters

Posted on

The lowly Interface

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.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.