Inspired by iron-media-query

A angular 2 directive that can be used to data bind to a CSS media query.

How to use

The query property is a CSS media query, learn more about them here. The matches property is a boolean representing whether the page matches that media query.

<media-query query="(max-width : 768px)" [(matches)]="isSmallDevice"></media-query>

<div *ngIf="isSmallDevice">
   Some awesome content for small devices

isSmallDevice must be a property in your controller. When running on Dartium *ngIf may complain if isSmallDevice is null, you can solve that but setting a non-null value to it, it will be updated as soon as media-query gets its first result.