title: Angular2 Exception: Can't bind to 'ngStyle' since it isn't a known native property
body: <p>I have done a lot of work with the new Angular2 Framework recently. While testing out some of the features, I ended up with the error:</p>
  
  <blockquote>
    <p><code>Can't bind to 'ngStyle' since it isn't a known native property</code></p>
  </blockquote>
  
  <p>While investigating the error itself I came to several solutions, like adding the 'directive: [NgStyle]' to the component, but this does not solve the problem.</p>
  
  <p>The code is like following:</p>
  
  <p><strong>main.ts</strong></p>
  
  <pre><code>import {bootstrap} from 'angular2/platform/browser';
  import {App} from './app'
  
  bootstrap(App).then(error =&gt; console.log(error));
  </code></pre>
  
  <p><strong>app.ts</strong></p>
  
  <pre><code>import { Component } from 'angular2/core';
  import { Button } from './button';
  import { NgStyle } from "angular2/common";
  
  @Component({
      selector: 'app',
      template: '&lt;h1&gt;My First Angular 2 App&lt;/h1&gt;&lt;button&gt;Hello World&lt;/button&gt;',
      directives: [Button, NgStyle]
  })
  export class App { }
  </code></pre>
  
  <p><strong>button.ts</strong></p>
  
  <pre><code>import {Component} from "angular2/core";
  import {NgStyle} from "angular2/common";
  
  @Component({
      selector: 'button',
      host: {
          '[ngStyle]': 'style()'
      },
      templateUrl: '&lt;ng-content&gt;&lt;/ng-content&gt;',
      directives: [NgStyle]
  })
  export class Button {
      style() {
          return {
              'background': 'red'
          }
      }
  }
  </code></pre>
  
  <p>Thank you for your help.</p>