zitadel/console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.html

<app-refresh-table [loading]="dataSource.loading$ | async" [selection]="selection" (refreshed)="refreshPage()"
    [dataSize]="dataSource.totalResult">
    <ng-template appHasRole [appHasRole]="['project.app.write']" actions>
        <a [disabled]="disabled" class="add-button" [routerLink]="[ '/projects', projectId, 'apps', 'create']"
            color="primary" mat-raised-button>
            <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
        </a>
    </ng-template>

    <div class="table-wrapper">
        <table [dataSource]="dataSource" mat-table class="full-width-table" matSort aria-label="Elements">
            <ng-container matColumnDef="select">
                <th class="selection" mat-header-cell *matHeaderCellDef>
                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
                        [checked]="selection.hasValue() && isAllSelected()"
                        [indeterminate]="selection.hasValue() && !isAllSelected()">
                    </mat-checkbox>
                </th>
                <td class="selection" mat-cell *matCellDef="let row">
                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
                        (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                    </mat-checkbox>
                </td>
            </ng-container>

            <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.NAME' | translate }} </th>
                <td class="pointer" [routerLink]="['/projects', projectId, 'apps', role.id ]" mat-cell
                    *matCellDef="let role">
                    {{role.name}} </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>

        <mat-paginator #paginator [length]="dataSource.totalResult" [pageSize]="25"
            [pageSizeOptions]="[25, 50, 100, 250]">
        </mat-paginator>
    </div>
</app-refresh-table>