fix: add null safety and type guard for ErrorDialogComponent data

fix:logic

fix: Handles all data types gracefully

improve the typeScript Component
This commit is contained in:
shubhamsharma9199
2025-11-05 22:24:27 +05:30
parent e4d5966bd6
commit 925a1aca00
2 changed files with 30 additions and 6 deletions
@@ -1,8 +1,8 @@
<h1 mat-dialog-title>{{ 'Error Log' | translate }}</h1>
<div mat-dialog-content>
<p *ngIf="!showAsCode">{{ data }}</p>
<span *ngIf="showAsCode" [innerHTML]="data"></span>
<p *ngIf="!showAsCode">{{ displayData }}</p>
<span *ngIf="showAsCode" [innerHTML]="sanitizedData"></span>
</div>
<mat-dialog-actions align="left">
@@ -1,5 +1,5 @@
/** Angular Imports. */
import { Component, OnInit, Inject } from '@angular/core';
import { Component, OnInit, Inject, SecurityContext } from '@angular/core';
import {
MatDialogRef,
MAT_DIALOG_DATA,
@@ -9,6 +9,7 @@ import {
MatDialogClose
} from '@angular/material/dialog';
import { CdkScrollable } from '@angular/cdk/scrolling';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
@Component({
@@ -28,12 +29,35 @@ export class ErrorDialogComponent {
showAsCode = false;
/**
* @param {MatDialogRef} dialogRef Component reference to dialog.
* @param {any} data Provides any data.
* @param {unknown} data Provides any data.
* @param {DomSanitizer} sanitizer Service to sanitize HTML content.
*/
constructor(
public dialogRef: MatDialogRef<ErrorDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: string
@Inject(MAT_DIALOG_DATA) public data: unknown,
private sanitizer: DomSanitizer
) {
this.showAsCode = data.startsWith('<pre><code>');
// Guard for non-string data to avoid runtime error
this.showAsCode = typeof data === 'string' && data.startsWith('<pre><code>');
}
/**
* Get display data with proper type safety for template usage.
* @returns {string} Safe string representation of the data.
*/
get displayData(): string {
if (typeof this.data === 'string') {
return this.data;
}
// Convert non-string data to string representation for display
return this.data != null ? JSON.stringify(this.data) : '';
}
/**
* Get sanitized HTML content for safe rendering.
* @returns {SafeHtml} Sanitized HTML content.
*/
get sanitizedData(): SafeHtml {
return this.sanitizer.sanitize(SecurityContext.HTML, this.displayData) || '';
}
}