src/app/app.component.html

<mat-toolbar color="primary" [class.mat-elevation-z1]="true">
  <span class="mat-body-strong ellipsis">P3X Angular HTTP Cache Interceptor v{{ version }}</span>
</mat-toolbar>

<div style="max-width: 1100px; margin-left: auto; margin-right: auto;">
  <nav mat-tab-nav-bar [tabPanel]="tabPanel"  backgroundColor="primary" color="accent" style=" border-top-left-radius: 6px; border-top-right-radius: 6px;">
    @for (link of navLinks; track link) {
      <a mat-tab-link
        [routerLink]="link.link"
        routerLinkActive #rla="routerLinkActive"
        [active]="rla.isActive">
        {{link.label}}
      </a>
    }
  </nav>

<mat-tab-nav-panel #tabPanel>
    <mat-card style=" border-top-left-radius: 0px; border-top-right-radius: 0px; padding-top: 0;">
      <div>
        <a class="link-fix" mat-button color="accent" href="https://corifeus.com/angular-http-cache-interceptor" target="_blank">Corifeus P3X Angular HTTP Cache Interceptor</a>
      </div>
      <mat-divider></mat-divider>
      <div>
        <a class="link-fix" mat-button color="accent" href="https://github.com/patrikx3/angular-http-cache-interceptor" target="_blank">GitHub</a>
      </div>
      <mat-divider></mat-divider>
      <div>
        <a class="link-fix" mat-button color="accent" href="https://www.npmjs.com/package/p3x-angular-http-cache-interceptor" target="_blank">NpmJS</a>
      </div>
      <mat-divider></mat-divider>
      <br/>
      <div style="margin: 10px;">
        <router-outlet></router-outlet>
      </div>
    </mat-card>

</mat-tab-nav-panel>
  <br/>
  </div>
</div>

`/`	Focus search
`?`	Show this help
`Esc`	Unfocus input