### File

`src/lib/environment/environment.component.ts`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
host | `{ }`
selector | `rxap-environment`
imports | `NgIf` `DatePipe`
styleUrls | `./environment.component.scss`
templateUrl | `./environment.component.html`

### Index

###### Properties

- Public Readonly environment

### Properties

Public Readonly environment
Type : `Environment`
Default value : `inject(RXAP_ENVIRONMENT)`
Defined in src/lib/environment/environment.component.ts:24

    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%;
      }
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""