title: How do I declare a model class in my Angular 2 component using TypeScript?
body: <p>I am new to Angular 2 and TypeScript and I'm trying to follow best practices.</p>
  
  <p>Instead of using a simple JavaScript model ({ }), I'm attempting to create a TypeScript class.</p>
  
  <p>However, Angular 2 doesn't seem to like it.</p>
  
  <p>My code is:</p>
  
  <pre><code>import { Component, Input } from "@angular/core";
  
  @Component({
      selector: "testWidget",
      template: "&lt;div&gt;This is a test and {{model.param1}} is my param.&lt;/div&gt;"
  })
  
  export class testWidget {
      constructor(private model: Model) {}
  }
  
  class Model {
      param1: string;
  }
  </code></pre>
  
  <p>and I'm using it as:</p>
  
  <pre><code>import { testWidget} from "lib/testWidget";
  
  @Component({
      selector: "myComponent",
      template: "&lt;testWidget&gt;&lt;/testWidget&gt;",
      directives: [testWidget]
  })
  </code></pre>
  
  <p>I'm getting an error from Angular:</p>
  
  <blockquote>
    <p>EXCEPTION: Can't resolve all parameters for testWidget: (?).</p>
  </blockquote>
  
  <p>So I thought, Model isn't defined yet... I'll move it to the top!</p>
  
  <p>Except now I get the exception:</p>
  
  <blockquote>
    <p>ORIGINAL EXCEPTION: No provider for Model!</p>
  </blockquote>
  
  <p>How do I accomplish this??</p>
  
  <p>Edit: Thanks to all for the answer.  It led me to the right path.</p>
  
  <p>In order to inject this into the constructor, I need to add it to the providers on the component. </p>
  
  <p>This appears to work:</p>
  
  <pre><code>import { Component, Input } from "@angular/core";
  
  class Model {
      param1: string;
  }
  
  @Component({
      selector: "testWidget",
      template: "&lt;div&gt;This is a test and {{model.param1}} is my param.&lt;/div&gt;",
      providers: [Model]
  })
  
  export class testWidget {
      constructor(private model: Model) {}
  }
  </code></pre>