How do I declare a model class in my Angular 2 component using TypeScript?

Question

I am new to Angular 2 and TypeScript and I'm trying to follow best practices.

Instead of using a simple JavaScript model ({ }), I'm attempting to create a TypeScript class.

However, Angular 2 doesn't seem to like it.

My code is:

import { Component, Input } from "@angular/core";  @Component({     selector: "testWidget",     template: "<div>This is a test and {{model.param1}} is my param.</div>" })  export class testWidget {     constructor(private model: Model) {} }  class Model {     param1: string; } 

and I'm using it as:

import { testWidget} from "lib/testWidget";  @Component({     selector: "myComponent",     template: "<testWidget></testWidget>",     directives: [testWidget] }) 

I'm getting an error from Angular:

EXCEPTION: Can't resolve all parameters for testWidget: (?).

So I thought, Model isn't defined yet... I'll move it to the top!

Except now I get the exception:

ORIGINAL EXCEPTION: No provider for Model!

How do I accomplish this??

Edit: Thanks to all for the answer. It led me to the right path.

In order to inject this into the constructor, I need to add it to the providers on the component.

This appears to work:

import { Component, Input } from "@angular/core";  class Model {     param1: string; }  @Component({     selector: "testWidget",     template: "<div>This is a test and {{model.param1}} is my param.</div>",     providers: [Model] })  export class testWidget {     constructor(private model: Model) {} } 

Answer 1

I'd try this:

Split your Model into a separate file called model.ts:

export class Model {     param1: string; } 

Import it into your component. This will give you the added benefit of being able to use it in other components:

Import { Model } from './model'; 

Initialize in the component:

export class testWidget {    public model: Model;    constructor(){        this.model = new Model();        this.model.param1 = "your string value here";    } } 

Access it appropriately in the html:

@Component({       selector: "testWidget",       template: "<div>This is a test and {{model.param1}} is my param.</div>" }) 

I want to add to the answer a comment made by @PatMigliaccio because it's important to adapt to the latest tools and technologies:

If you are using angular-cli you can call ng g class model and it will generate it for you. model being replaced with whatever naming you desire.