Создание таблицы Angular 2

Frontend developer
1

Помогите разобраться с созданием таблицы (см. домашнее задание) с помощью Angular 2.
Я создал таблицу, но понимаю что как-то не правильно, так как уже домашнее задание с третьего урока применить походу к этой таблице не получится.

Вот код компонента:

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

interface typeProd {
id: number;
name: string;
price: number;
}

const products: typeProd = [{ id: 1, name : "product 1", price : 100 },
{ id: 2, name : "product 2", price : 200 },
{ id: 3, name : "product 3", price : 300 },
{ id: 4, name : "product 4", price : 400 },
{ id: 5, name : "product 5", price : 500 },
{ id: 6, name : "product 6", price : 600 },
{ id: 7, name : "product 7", price : 700 },
{ id: 8, name : "product 8", price : 800 },
{ id: 9, name : "product 9", price : 900 },
{ id: 10, name :"product 10", price : 1000 }];

@Component({
moduleId: module.id,
selector: "my-table",
templateUrl: "table.component.html",
inputs: ["rows"]
})
export class TableComponent {

 rows: number;
 
 product: typeProd[] = products.slice(0, this.rows);

}

Вот код html :

<table class="table table-striped">
    <tr *ngFor="let prod of product.slice(0, rows)" #myRow><td>id: {{prod.id}}</td><td>name: {{prod.name}}</td><td>price: {{prod.price}}</td><button class="btn btn-warning" (click)="myRow.remove()">Delete</button></tr>
 </table>

Помогите, пожалуйста, разобраться. Спасибо )