temp

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

interface IDataItem {
  name: string;
  id: number;
}

@Component({
  selector: "my-app",
  /* html */

  // в отдельном файле
  template: `
    <table>
      <tr>
        <th>id</th>
        <th>name</th>
        <th>status</th>
      </tr>
      <tr
        *ngFor="let item of data"
        [class.selected]="item === selected"
        (click)="onSelect(item)"
      >
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ getStatus(item) }}</td>
      </tr>
    </table>
  `,
  // в отдельном файле
  styles: [
    `
      table {
        border: 1px solid black;
      }

      table tr:first-child {
        background-color: #e2e2e2;
      }

      table tr.selected td {
        background: yellow;
      }

      table td {
        padding: 10px 20px;
      }
    `,
  ],
})
export class AppComponent {
  public selected: IDataItem;
  // приходит с бекенда
  public data: IDataItem[] = [
    {
      name: "name 1",
      id: 1,
    },
    {
      name: "name 2",
      id: 2,
    },
    {
      name: "name 3",
      id: 3,
    },
    {
      name: "name 4",
      id: 4,
    },
  ];

  public onSelect(item: IDataItem): void {
    this.selected = item;
  }

  public getStatus(item: IDataItem): string {
    const status = getStatus(item.id);
    return `${item.id} ${item.name} ${status}`;
  }
}

// не трогать имплементация 3d party библиотеки
function getStatus(id: number): string {
  function fib(n) {
    return n <= 1 ? n : fib(n - 1) + fib(n - 2);
  }
  return `status ${fib(10 + id)}`;
}