<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="margin: 25px;">
<mat-card>
<div class="list-item-fix">
<button mat-flat-button color="primary" (click)="loadCached()">Cached request</button>
<br/>
<br/>
<div class="mat-caption">Itt will try to load some random data with cached data. You can see in the browser inspector network tab, that there will be only one request.</div>
</div>
<br/>
<mat-divider></mat-divider>
<br/>
<div class="list-item-fix">
<button mat-flat-button color="primary" (click)="loadNonCached()">Non cached request</button>
<br/>
<br/>
<div class="mat-caption">It will try to load some random data without cache. You can see in the browser inspector network tab, that every click will talk to a server and retrieve the new data.</div>
</div>
<br/>
<mat-divider></mat-divider>
<br/>
<div>
<a mat-button color="accent" class="mat-button-wrapping" href="https://corifeus.com/angular-http-cache-interceptor" target="_blank">Corifeus P3X Angular HTTP Cache Interceptor</a>
</div>
<br/>
<mat-divider></mat-divider>
<br/>
<div>
<a mat-button color="accent" href="https://github.com/patrikx3/angular-http-cache-interceptor" target="_blank">GitHub</a>
</div>
<br/>
<mat-divider></mat-divider>
<br/>
<div>
<a mat-button color="accent" href="https://www.npmjs.com/package/p3x-angular-http-cache-interceptor" target="_blank">NpmJS</a>
</div>
</mat-card>
</div>