dnet-applications/frontends/dnet-is-application/src/app/protocols/protocols.component.html

<mat-card>
    <mat-card-header>
        <mat-card-title>Harvesting Protocols</mat-card-title>
    </mat-card-header>
    <mat-card-content>
        <div style="margin-top: 3em;" *ngFor="let prot of protDatasources">
            <h3>{{prot.protocol}}</h3>

            <table mat-table [dataSource]="prot.datasource" class="mat-elevation-z8">

                <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="label">
                    <th mat-header-cell *matHeaderCellDef> Label </th>
                    <td mat-cell *matCellDef="let element"> {{element.label}} </td>
                </ng-container>

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

                <ng-container matColumnDef="optional">
                    <th mat-header-cell *matHeaderCellDef> Required </th>
                    <td mat-cell *matCellDef="let element">
                        <mat-icon fontIcon="check" *ngIf="!element.optional"></mat-icon>
                    </td>
                </ng-container>

                <ng-container matColumnDef="hasSelFunction">
                    <th mat-header-cell *matHeaderCellDef> Has Sel Function </th>
                    <td mat-cell *matCellDef="let element">
                        <mat-icon fontIcon="check" *ngIf="element.hasSelFunction"></mat-icon>
                    </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="colums"></tr> 
                <tr mat-row *matRowDef="let row; columns: colums;"></tr>

                <!-- Row shown when there is no matching data. -->
                <tr class="mat-row" *matNoDataRow>
                    <td class="mat-cell" colspan="5">No parameters</td>
                </tr>
            </table>
        </div>
    </mat-card-content>

</mat-card>