title: angular 2 flex layout: Can't bind to ngStyle.md since it isn't a known property of div
body: <p>Iam using flex layout with angular 2.3.1, I am trying to create a responsive style using the responsive api's provided by flex layout module, my divs looks like this</p>
  
  <pre><code>&lt;div class="container popular-projects" classfxLayout="row" fxLayoutWrap="wrap" fxLayout.xs="column" fxLayoutAlign="center"
       fxLayoutGap="30px"
       fxLayoutGap.xs="5px"&gt;
  &lt;div class="item" [ngStyle]="{width:'263px',height:'384px'}" [ngStyle.md]="{width:'156px',height:'257px'}" &gt;
  
  &lt;div [ngStyle]="{'padding-left':'11px','font-size':'18px', 'padding-top': '10px'}" [ngStyle.md]="{'padding-left':'10px','font-size':'14px', 'padding-top': '12px'}" class="title"&gt;     PROJECT NAME&lt;/div&gt;
  &lt;div [ngStyle]="{'padding-left':'11px','font-size':'16px', 'padding-top': '10px'}" [ngStyle.md]="{'padding-left':'10px','font-size':'11px', 'padding-top': '10px'}" class="description"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet ac arcu in auctor.&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the flex layout directives are working normally until I started using the binding [ngStyle.md].</p>
  
  <p>in my app.module I imported flexlayoutModule like this </p>
  
  <pre><code>import { FlexLayoutModule } from "@angular/flex-layout";
  </code></pre>
  
  <p>then I added it to the imports so its accessed in all the application </p>
  
  <pre><code>   imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  MaterialModule,
  FlexLayoutModule,
  Md2Module,
  MdGridListModule,
  routing,
  CommonModule 
  </code></pre>
  
  <p>Any help is appreciated.</p>