src/lib/environment/environment.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| host | { |
| selector | rxap-environment |
| imports |
NgIf
DatePipe
|
| styleUrls | ./environment.component.scss |
| templateUrl | ./environment.component.html |
Properties |
|
| Public Readonly environment |
Type : Environment
|
Default value : inject(RXAP_ENVIRONMENT)
|
import {
DatePipe,
NgIf,
} from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
inject,
} from '@angular/core';
import { Environment } from '../environment';
import { RXAP_ENVIRONMENT } from './tokens';
@Component({
selector: 'rxap-environment',
templateUrl: './environment.component.html',
styleUrls: ['./environment.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'rxap-environment' },
imports: [NgIf, DatePipe]
})
export class EnvironmentComponent {
public readonly environment: Environment = inject(RXAP_ENVIRONMENT);
}
<div class="p-4">
<h2 class="text-xl font-bold pb-2">{{ environment.app }}</h2>
<table class="table-auto">
<tr *ngIf="environment.name">
<th>Environment</th>
<td>{{environment.name}}</td>
</tr>
<tr>
<th>Production</th>
<td>{{environment.production}}</td>
</tr>
<tr *ngIf="environment.serviceWorker !== undefined">
<th>Service Worker</th>
<td>{{environment.serviceWorker}}</td>
</tr>
<tr *ngIf="environment.release">
<th>Release</th>
<td>{{environment.release}}</td>
</tr>
<tr *ngIf="environment.commit">
<th>Commit</th>
<td>{{environment.commit}}</td>
</tr>
<tr *ngIf="environment.timestamp">
<th>Timestamp</th>
<td>{{environment.timestamp | date:'dd.MM.yy HH:mm:ss'}}</td>
</tr>
<tr *ngIf="environment.branch">
<th>Branch</th>
<td>{{environment.branch}}</td>
</tr>
<tr *ngIf="environment.tag">
<th>Tag</th>
<td>{{environment.tag}}</td>
</tr>
<ng-content></ng-content>
</table>
</div>
./environment.component.scss
.collapse-button {
background-color: transparent;
margin: 8px 8px 20px 8px;
border: none;
cursor: pointer;
width: calc(100% - 16px);
}
table {
th {
text-align: left;
padding-right: 16px;
}
th, td {
font-size: 75%;
}
}