File
Methods
|
openEnvironmentInfo
|
openEnvironmentInfo()
|
|
|
|
|
|
Protected
Readonly
dialog
|
Default value : inject(MatDialog)
|
|
|
|
Public
Readonly
modules
|
Default value : coerceArray(inject(RXAP_RELEASE_INFO_MODULE, { optional: true }))
|
|
|
|
Public
Readonly
release
|
Default value : DetermineReleaseName(inject(RXAP_ENVIRONMENT))
|
|
|
import {
ChangeDetectionStrategy,
Component,
inject,
} from '@angular/core';
import { MatButton } from '@angular/material/button';
import { MatDialog } from '@angular/material/dialog';
import {
DetermineReleaseName,
EnvironmentComponent,
RXAP_ENVIRONMENT,
} from '@rxap/environment';
import { RXAP_RELEASE_INFO_MODULE } from '../tokens';
import { coerceArray } from '@rxap/utilities';
@Component({
selector: 'rxap-release-info',
imports: [
MatButton,
],
templateUrl: './release-info.component.html',
styleUrl: './release-info.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ReleaseInfoComponent {
public readonly modules = coerceArray(inject(RXAP_RELEASE_INFO_MODULE, { optional: true }));
public readonly release = DetermineReleaseName(inject(RXAP_ENVIRONMENT));
protected readonly dialog = inject(MatDialog);
openEnvironmentInfo() {
this.dialog.open(EnvironmentComponent, {
closeOnNavigation: true,
});
}
}
<div class="flex flex-col gap-2 w-full justify-center">
<button (click)="openEnvironmentInfo()" mat-button>{{ release }}</button>
@if (modules.length) {
<table class="table-auto border-separate border-spacing-2 bg-white dark:bg-slate-800 text-sm shadow-sm">
<thead class="bg-slate-50 dark:bg-slate-700">
<th class="text-sm border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-200 border p-2">Module</th>
<th class="text-sm border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-200 border p-2">Version</th>
<th class="text-sm border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-200 border p-2">Hash</th>
</thead>
<tbody>
@for (module of modules; track module.name) {
<tr>
<th class="text-sm border border-slate-300 dark:border-slate-700 text-slate-500 dark:text-slate-400 py-2 px-4">{{ module.name }}</th>
<td class="text-sm border border-slate-300 dark:border-slate-700 text-slate-500 dark:text-slate-400 p-2">{{ module.version }}</td>
<td class="text-sm border border-slate-300 dark:border-slate-700 text-slate-500 dark:text-slate-400 p-2">{{ module.hash }}</td>
</tr>
}
</tbody>
</table>
}
</div>
Legend
Html element with directive