src/lib/any-http-error/any-http-error.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | rxap-any-http-error |
| imports |
DataGridModule
NgIf
DatePipe
KeyValuePipe
NgForOf
CopyToClipboardComponent
JsonPipe
JsonViewerComponent
|
| styleUrls | ./any-http-error.component.scss |
| templateUrl | ./any-http-error.component.html |
Properties |
|
| Public Readonly error |
Type : AnyHttpErrorDialogData
|
Default value : inject(RXAP_ERROR_DIALOG_ERROR)
|
| Public Readonly isProduction |
Type : boolean
|
Default value : inject(RXAP_ENVIRONMENT, { optional: true })?.production ?? false
|
import {
DatePipe,
JsonPipe,
KeyValuePipe,
NgForOf,
NgIf,
} from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
inject,
} from '@angular/core';
import {
CopyToClipboardComponent,
JsonViewerComponent,
} from '@rxap/components';
import { DataGridModule } from '@rxap/data-grid';
import { RXAP_ENVIRONMENT } from '@rxap/environment';
import { IErrorDialogComponent } from '../error-dialog/error-dialog.component';
import { RXAP_ERROR_DIALOG_ERROR } from '../tokens';
import { AnyHttpErrorDialogData } from './any-http-error-dialog-data';
@Component({
selector: 'rxap-any-http-error',
templateUrl: './any-http-error.component.html',
styleUrls: ['./any-http-error.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
DataGridModule,
NgIf,
DatePipe,
KeyValuePipe,
NgForOf,
CopyToClipboardComponent,
JsonPipe,
JsonViewerComponent,
]
})
export class AnyHttpErrorComponent implements IErrorDialogComponent<AnyHttpErrorDialogData> {
public readonly isProduction: boolean = inject(RXAP_ENVIRONMENT, { optional: true })?.production ?? false;
public readonly error: AnyHttpErrorDialogData = inject(RXAP_ERROR_DIALOG_ERROR);
}
<rxap-data-grid [data]="error">
<ng-container rxapDataGridRowDef="name"></ng-container>
<ng-container rxapDataGridRowDef="timestamp">
<td *rxapDataGridCellDef="let value">{{ value | date:'HH:mm:ss' }}</td>
</ng-container>
<ng-container rxapDataGridRowDef="method"></ng-container>
<ng-container rxapDataGridRowDef="url"></ng-container>
<ng-container rxapDataGridRowDef="status"></ng-container>
<ng-container rxapDataGridRowDef="statusText"></ng-container>
<ng-container rxapDataGridRowDef="message"></ng-container>
<ng-container rxapDataGridRowDef="headers">
<td *rxapDataGridCellDef="let value">
<rxap-data-grid [data]="value">
<ng-container *ngFor="let entry of value | keyvalue" [rxapDataGridRowDef]="$any(entry.key)">
<td *rxapDataGridCellDef="let value">
<ng-container *ngIf="value.length > 1">
<ul>
<li *ngFor="let item of value">{{ item }}</li>
</ul>
</ng-container>
<ng-container *ngIf="value.length === 1">{{ value[0] }}</ng-container>
<ng-container *ngIf="value.length === 0">NONE</ng-container>
</td>
</ng-container>
</rxap-data-grid>
</td>
</ng-container>
<ng-container *ngIf="!isProduction" rxapDataGridRowDef="error">
<td *rxapDataGridCellDef="let value">
<ng-container *ngIf="value">
<rxap-copy-to-clipboard [value]="value | json">Copy Response Body</rxap-copy-to-clipboard>
<div class="body">
<rxap-json-viewer [expanded]="false" [json]="value"></rxap-json-viewer>
</div>
</ng-container>
<ng-container *ngIf="!value">NONE</ng-container>
</td>
</ng-container>
<ng-container *ngIf="!isProduction" rxapDataGridRowDef="body">
<td *rxapDataGridCellDef="let value">
<ng-container *ngIf="value">
<rxap-copy-to-clipboard [value]="value | json">Copy Request Body</rxap-copy-to-clipboard>
<div class="body">
<rxap-json-viewer [expanded]="false" [json]="value"></rxap-json-viewer>
</div>
</ng-container>
<ng-container *ngIf="!value">NONE</ng-container>
</td>
</ng-container>
</rxap-data-grid>
./any-http-error.component.scss