we_bstly-web/src/app/pages/services/services.component.html

<h3>{{'services' | i18n}}</h3>

<p *ngIf="!services || services.length == 0">{{'services.empty' | i18n}}</p>


<table *ngIf="services && services.length > 0" mat-table matSort [dataSource]="services" (matSortChange)="sortData($event)" matSortActive="name" matSortDirection="asc">

    <ng-container matColumnDef="icon">
        <th mat-header-cell *matHeaderCellDef> </th>
        <td mat-cell *matCellDef="let service">
            <mat-icon>{{'services.' + service.name + '.icon' | i18n}}</mat-icon>
        </td>
    </ng-container>


    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'service.name' | i18n}} </th>
        <td mat-cell *matCellDef="let service" class="text-center">
            <a *ngIf="service.url" href="{{service.url}}" [target]="service.sameSite ? '_self' : '_blank'" mat-button color="accent">
                <strong>{{'services.' + service.name + '.title' | i18n}}</strong>
                <mat-icon *ngIf="!service.sameSite" inline="true">
                    open_in_new</mat-icon>
            </a>
            <a *ngIf="!service.url" mat-button disabled>
                <strong>{{'services.' + service.name + '.title' | i18n}}</strong>
            </a>
            <div><small>{{'services.' + service.name + '.subtitle' | i18n}}</small></div>
        </td>
    </ng-container>

    <ng-container matColumnDef="text">
        <th mat-header-cell *matHeaderCellDef> {{'service.text' | i18n}} </th>
        <td mat-cell *matCellDef="let service">{{ 'services.' + service.name + '.text' | i18n}}</td>
    </ng-container>

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