Inspired by iron-media-query
A angular 2 directive that can be used to data bind to a CSS media query.
How to use
query property is a CSS media query, learn more about them here.
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 </div>
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.