The issue arises from the fact that you have not included Model in either the bootstrap (which will make it a singleton), or in the providers array of your component definition:

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

export class testWidget {
    constructor(private model: Model) {}
}

Furthermore, it is recommended to declare Model above the Component. It would be even better to place it in its own separate file.

If you simply want it to serve as a class for creating multiple instances, it is more efficient to use new.

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

export class testWidget {

    private model: Model = new Model();

    constructor() {}
}

class Automobile {
  id: number;
  make: string;
  model: string;
  color: string;
  year: Date;

  constructor(carInfo) {
      {
        this.id = carInfo.id;
        this.make = carInfo.make || '';
        this.model = carInfo.model || '';
        this.color = carInfo.color || '';
        this.year = new Date(carInfo.year).getFullYear();
      }
  }
}

The use of || operator is particularly beneficial for handling missing data in complex objects.

. .

In your component.ts or service.ts file, you can convert response data into the model:

// Import the automobile model
import { Automobile } from './automobile.model.ts';

// For single object
carInstance = new Automobile(someObject);

// For an array of automobiles
carsArray = someDataToConvert.map(c => new Automobile(c));

If your model is on the same page as your Component class but declared after it, you will need to use forwardRef to refer to the Class. It's not recommended to do this, instead always have the model object in a separate file.

export class testWidget {
    constructor(@Inject(forwardRef(() => Model)) private service: Model) {}
}

Additionally, ensure that your view interpolation refers to the correct object:

{{model?.param1}}

A better approach would be to define your Model Class in a different file and import it when needed. Be sure to export your class name so it can be imported:

import { Model } from './model';

Here is the code snippet:

    import { Component } from '@angular/core';

class model {
  username : string;
  password : string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

username : string;
password : string;
usermodel = new model();

login(){
if(this.usermodel.username == "admin"){
alert("hi");
}else{
alert("bye");
this.usermodel.username = "";
}    
}
}

This is how the corresponding HTML looks like:

<div class="login">
Username : <input type="text" [(ngModel)]="usermodel.username"/>
Password : <input type="text" [(ngModel)]="usermodel.password"/>
<input type="button" value="Click Me" (click)="login()" />
</div>

To implement the suggestions provided in @brendon's response, utilize the angular-cli.

Another option to consider is:

ng g class modelsDirectoy/modelName --type=model

/* This operation will result in:
 src/app/modelsDirectoy
 ├── modelName.model.ts
 ├── ...
 ...
*/

Note: ng g class does not equal ng g c
However, for quicker access based on your angular-cli version, you can use ng g cl as a shortcut.

Although this question may be older, it's important to clarify that the model variable has been added incorrectly to your test widget class. If you require a Model variable, avoid passing it through the component constructor. The intended method is to pass services or other injectables in that manner. When instantiating your test widget within another component and needing to pass a model object, consider utilizing the Angular core OnInit and Input/Output design patterns.

For example, your code should resemble something similar to this:

import { Component, Input, OnInit } from "@angular/core";
import { YourModelLoadingService } from "../yourModuleRootFolderPath/index"

class Model {
    param1: string;
}

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

export class testWidget implements OnInit {
    @Input() model: Model; //Use this if you want the parent component instantiating this
        //one to be able to directly set the model's value
    private _model: Model; //Use this if you only want the model to be private within
        //the component along with a service to load the model's value
    constructor(
        private _yourModelLoadingService: YourModelLoadingService //This service should
        //usually be provided at the module level, not the component level
    ) {}

    ngOnInit() {
        this.load();
    }

    private load() {
        //Include code for making your component read-only,
        //possibly incorporating a busy spinner on top of your view
        //This helps prevent bugs and informs the user of ongoing processes

        //If using the Input model approach so the parent scope can set the contents of the model,
        //add an event callback for when the model is updated by the parent
        //On event: once loading is completed, disable read-only mode and any accompanying spinner

        //If relying on a service to populate the model, incorporate code calling your
        //service functions retrieving the model's value
        //Upon setting the model's value, disable read-only mode and any spinner present. Depending on whether utilizing Observables or other methods,
        //this step may involve additional callbacks as well
    }
}

A struct/model-like class should not be injected, as it would allow only a single shared instance within its provided scope. In this scenario, a new Model instance is created each time testWidget is instantiated by the dependency injector. Providing it at the module level ensures a single shared instance for all components and services within the module.

Following standard Object-Oriented principles, create a private model variable within the class. Any information needed during instantiation should be handled by a service (injectable) provided by the parent module. This aligns with Angular's intended approach to dependency injection and communication.

Additionally, as mentioned by others, declare your model classes in a separate file and import the class accordingly.

I highly recommend revisiting the angular documentation guide to review fundamental concepts related to annotations and class types: https://angular.io/guide/architecture

Pay close attention to sections covering Modules, Components, and Services/Dependency Injection, crucial for grasping Angular's architectural usage. Given Angular's emphasis on architecture, understanding application structure is vital. While Angular automates separation of concerns, dependency injection factories, and cross-browser compatibility, correct application architecture remains essential for expected functionality.

To begin, you will need to create a file named model.ts within your component directory. Here is an example of how it should be structured:

export module DataModel {
       export interface DataObjectName {
         propertyName: type;
        }
       export interface DataObjectAnother {
         propertyName: type;
        }
    }

After creating the model.ts file, import the above content into your component like this:

import {DataModel} from './model';

export class YourComponent {
   public DataObject: DataModel.DataObjectName;
}

Your DataObject variable should now contain all the properties defined in the DataObjectName interface.