Design service for helping build responsive components

[hansl]

We should have something that works both in headless rendering and browsers.

The solution should be something along those lines (pseudo code):

@Injectable()
export class MdLayoutService {
  onLayoutChange: EventEmitter<MdLayoutEnum> = new EventEmitter<MdLayoutEnum>();
  get currentLayout(): MdLayoutEnum {
    return this.layout_;
  }

  constructor(private layout_: MdLayoutEnum) {
    if (!headless) {  // <-- Tricky part
      window.matchMedia('...').addListener((mql) => this.onLayoutChange.emit(...));
    }
  }
};

You can then provide an MdLayoutEnum constant in headless browsing (or if you want to fix it in the browser or unit tests).

TODO:

• Design Doc.