<table *ngIf="dataSourceUdp.length" class="table" mat-table [dataSource]="dataSourceUdp">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let element">{{ element.name }}</td>
  </ng-container>

  <ng-container matColumnDef="rport">
    <th mat-header-cell *matHeaderCellDef>Local port</th>
    <td mat-cell *matCellDef="let element">{{ element.rport }}</td>
  </ng-container>

  <ng-container matColumnDef="rhost">
    <th mat-header-cell *matHeaderCellDef>Type</th>
    <td mat-cell *matCellDef="let element">{{ element.rhost }}</td>
  </ng-container>

  <ng-container matColumnDef="lport">
    <th mat-header-cell *matHeaderCellDef>Remote port</th>
    <td mat-cell *matCellDef="let element">{{ element.lport }}</td>
  </ng-container>

  <ng-container matColumnDef="action">
    <th mat-header-cell *matHeaderCellDef>Actions</th>
    <td mat-cell *matCellDef="let element">
      <button mat-icon-button matTooltip="Delete port" matTooltipClass="custom-tooltip" (click)="delete(element)">
        <mat-icon aria-label="Delete port">delete</mat-icon>
      </button>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<br *ngIf="dataSourceUdp.length" />
<mat-form-field class="form-field">
  <input matInput type="text" [(ngModel)]="newPort.name" placeholder="Name" />
</mat-form-field>
<mat-form-field class="form-field">
  <input matInput type="number" [(ngModel)]="newPort.lport" placeholder="Local port" />
</mat-form-field>
<mat-form-field class="form-field">
  <input matInput type="text" [(ngModel)]="newPort.rhost" placeholder="Remote host" />
</mat-form-field>
<mat-form-field class="form-field">
  <input matInput type="number" [(ngModel)]="newPort.rport" placeholder="Remote port" />
</mat-form-field>
<button mat-button class="form-field" (click)="onAddUdpInterface()">Add</button>
