project.component.html

<div *ngIf="!error; else errorMsg">

    <nav *ngIf="projectAdmin && !loading" mat-tab-nav-bar mat-align-tabs="center"
        class="navigation tab-bar margin-from-top" animationDuration="0ms" [color]="color">
        <a mat-tab-link *ngFor="let link of navigation; let first = first" id="{{link.route}}" [routerLink]="link.route"
            routerLinkActive="active-tab" #rla="routerLinkActive" [active]="rla.isActive"
            [disabled]="!first && !projectAdmin" [class.deactivated]="!project?.status">
            <mat-icon class="tab-icon">{{link.icon}}</mat-icon>
            {{link.label}}
        </a>
    </nav>

    <dsp-progress-indicator *ngIf="loading"></dsp-progress-indicator>

    <router-outlet *ngIf="!loading"></router-outlet>

</div>

<ng-template #errorMsg>
    <div class="content large middle">
        <app-error *ngIf="error" [status]="404"></app-error>
    </div>
</ng-template>