Правильный способ создания динамических c кнопок * с * функциональностью в Angular

Question

Я нашел много вопросов о создании кнопок с хорошими ответами, но они, похоже, не решали проблему функциональности кнопок после создания динамического c.

Сценарий

I у меня есть список интерфейсов, которые я получаю от коммутатора через вызов REST, и для каждого интерфейса, скажем, мне нужны две кнопки. «Отключите порт» и «Включите порт» просто для простоты. Эти интерфейсы различны для каждого коммутатора, поэтому они будут создаваться динамически.

switch.component. html

Что он делает

Ниже HTML будет генерировать X количество карт в сетке, каждая карта имеет две кнопки, называемые Включить порт и Выключить порт .

HTML

<div class="grid-container">
  <h1 class="mat-h1">Trafficshaper Demo Switch</h1>
  <mat-grid-list cols="2" rowHeight="215px">
    <mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
      <mat-card class="dashboard-card, max_width">
        <mat-card-header>
          <mat-card-title>
            {{card.name}}
            <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
              <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #menu="matMenu" xPosition="before">
              <button mat-menu-item>Expand</button>
              <button mat-menu-item>Remove</button>
            </mat-menu>
          </mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content">
            <p>OpenFlow Port ID: {{card.openflow_port}}</p>
            <p>MAC Address: {{card.hw_addr}}</p>
        </mat-card-content>
        <mat-card-actions>
            <button (click)="onButtonClick($event)" color="primary" mat-raised-button>Turn Port On</button>
            <button (click)="onButtonClick($event)" color="primary" mat-raised-button>Turn Port Off</button>
        </mat-card-actions>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
</div>

switch.component.ts

import { Component } from '@angular/core';
import { map } from 'rxjs/operators';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
import { PORTS } from '../mock-ports'
import { Port } from '../port'

interface Port_with_colrow extends Port {
  cols: Number
  rows: Number
}  

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

  ports = PORTS;

  /** Based on the screen size, switch from standard to one column per row */
  cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
    map(({ matches }) => {

      var new_ports:Port_with_colrow[] = [];

      if (matches) {
        for (let port of this.ports) {
          new_ports.push({"hw_addr": port["hw_addr"], "name": port["name"], "openflow_port": port["openflow_port"], cols: 1, rows: 1 });
        }
        return new_ports;
      }

      for (let port of this.ports) {
        new_ports.push({"hw_addr": port["hw_addr"], "name": port["name"], "openflow_port": port["openflow_port"], cols: 2, rows: 1 })
      }

      return new_ports;
    })
  );

  // TODO - This is the problem. How do I create a function tied to that dynamic button
  selectedPort: Port;
  onButtonClick(port: Port): void {
    // DO STUFF SPECIFIC TO INTERFACE
  }

  constructor(private breakpointObserver: BreakpointObserver) {}
}

Проблема

Для каждого интерфейса я хочу выполнить одно и то же действие, но это действие должно действовать на указанном c интерфейсе. Как динамически создать X-количество кнопок, а затем также создать X-количество совпадающих функций нажатия кнопок, которые действуют на этот конкретный c интерфейс в отличие от других? По сути, мне нужна шаблонная функция, которая принимает в качестве аргумента номер интерфейса.

Существует ли Angular лучший способ сделать это?