A new class named items-class.ts was successfully created:
export class ItemsClass {
constructor(public name:string, public desc:string, public stat:string){}
}
To implement this class in a component called app.component.ts:
import { Component } from '@angular/core';
import { ItemsClass } from './items-class';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
list:ItemsClass = new ItemsClass('Product 1', 'Electronics', 'Sold Out');
}
The next step is to display the item in an HTML template of the component app.component.html:
<div class="row">
<div class="col-xs-12">
<a class="btn btn-success">New Recipe</a>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<ul class="list-group">
{{list.name}}
</ul>
{{list.desc}} | {{list.stat}}
</div>
</div>
An error message indicates:
Error encountered while building module. Parameter mismatch in C:/Users/user/Desktop/test2/src/app/app.component.ts (9,21). at _checkDiagnostics (C:\Users...src\loader.js:145:15) at C:\Users...\src\loader.js:172:17 @ ./src/app/app.module.ts 14:0-47 @ ./src/main.ts @ multi main