This is the html of the component rendered "<app-output-console _ngcontent-ng-c1202931794="" _nghost-ng-c1774742000="" ng-reflect-console-data="<root><id>79</id><23>50</23></"><div _ngcontent-ng-c1774742000="" class="border bg-body-secondary console ng-star-inserted"><samp _ngcontent-ng-c1774742000=""><!--container--><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    79
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    79
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    50
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    25
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    25
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    4
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    94
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    94
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    9
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    75
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    75
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    54
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    75
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    75
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    68
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    77
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    77
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    32
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    29
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    29
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    51
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    53
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    53
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    7
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    11
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    11
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    71
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    66
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    66
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    53
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    55
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    55
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    57
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    60
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    60
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    77
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    33
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    33
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    56
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    87
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    87
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    41
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    66
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    66
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    89
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    37
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    37
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    60
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    60
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    60
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    96
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    23
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    23
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    51
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    67
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    67
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    63
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><pre _ngcontent-ng-c1774742000="" class="ng-star-inserted">              <code _ngcontent-ng-c1774742000="" language="xml" ng-reflect-language="xml" ng-reflect-code="<root>
  <id>
    63
  </id" class="hljs"><span class="hljs-tag">&lt;<span class="hljs-name">root</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">id</span>&gt;</span>
    63
  <span class="hljs-tag">&lt;/<span class="hljs-name">id</span>&gt;</span>
  &lt;23&gt;
    99
  &lt;/23&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">root</span>&gt;</span></code>
            </pre><!--container--><!--container--><!--container--><!--container--></samp></div><!--container--></app-output-console>" and this is the component code "output-console.component.ts (1-121)


import { CommonModule } from '@angular/common';
import {
  ChangeDetectionStrategy,
  Component,
  computed,
  input,
} from '@angular/core';
import { Highlight } from 'ngx-highlightjs';
import { PrettyJsonPipe } from '../shared/pipes/pretty-json.pipe';
import { PrettyXmlPipe } from '../shared/pipes/pretty-xml.pipe';
import { NgxJsonViewerModule } from 'ngx-json-viewer';
import Papa from 'papaparse';

@Component({
  selector: 'app-output-console',
  standalone: true,
  imports: [
    CommonModule,
    Highlight,
    PrettyJsonPipe,
    PrettyXmlPipe,
    NgxJsonViewerModule,
  ],
  templateUrl: './output-console.component.html',
  styleUrls: ['./output-console.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OutputConsoleComponent {
  public consoleData = input.required<string[]>();

  public dataEntries = computed(() => {
    let entries: string[] = [];
    for (let dataString of this.consoleData()) {
      entries.push(
        ...dataString
          .split('\n')
          .map((line) => line.trim())
          .filter((line) => line.length > 0),
      );
    }
    return entries;
  });

  public detectedLanguage = computed(() => {
    return this.detectLanguage(this.dataEntries()[0]);
  });

  public parsedJson = computed(() => {
    if (this.detectedLanguage() !== 'json') {
      return [];
    }

    return this.dataEntries().map((dataString) => {
      try {
        return JSON.parse(dataString);
      } catch (e) {
        console.error('JSON Parsing Error:', e);
        return null;
      }
    });
  });

  public parsedCsv = computed(() => {
    if (this.detectedLanguage() !== 'csv') {
      return [];
    }

    let allData = this.dataEntries().join('\n');
    const result = Papa.parse<{ [key: string]: any }>(allData, {
      header: true,
      skipEmptyLines: true,
    });

    return result.data.map((row) => {
      Object.keys(row).forEach((key) => {
        const value = row[key];
        if (typeof value === 'string' && value.trim().startsWith('{')) {
          try {
            row[key] = JSON.parse(value);
          } catch (e) {
            console.warn(`Could not parse JSON in CSV field ${key}:`, e);
          }
        }
      });
      return row;
    });
  });

  public isObject(value: any): boolean {
    return value && typeof value === 'object' && !Array.isArray(value);
  }

  public getCsvValues(row: any): any[] {
    return row ? Object.values(row) : [];
  }

  public getCsvHeaders(row: any): string[] {
    return row ? Object.keys(row) : [];
  }

  public detectLanguage(data: string): 'json' | 'xml' | 'csv' | 'plaintext' {
    data = data.trim();
    try {
      JSON.parse(data);
      return 'json';
    } catch {
      // Not JSON
    }

    if (data.startsWith('<')) {
      return 'xml';
    }

    if (data.includes(',') || data.includes('\n')) {
      return 'csv';
    }

    return 'plaintext';
  }
}


output-console.component.html (1-58)


@if (dataEntries() && dataEntries().length > 0) {
  <div class="border bg-body-secondary console">
    <samp>
      @switch (detectedLanguage()) {
        @case ("json") {
          @for (data of parsedJson(); track data) {
            <div class="json-viewer-item">
              <ngx-json-viewer [json]="data"></ngx-json-viewer>
            </div>
          }
        }
        @case ("xml") {
          @for (data of dataEntries(); track data) {
            <pre>
              <code [highlight]="data | prettyXml" language="xml"></code>
            </pre>
          }
        }
        @case ("csv") {
          <table class="table table-striped">
            <thead>
              <tr>
                @for (header of getCsvHeaders(parsedCsv()[0]); track header) {
                  <th>
                    {{ header }}
                  </th>
                }
              </tr>
            </thead>
            <tbody>
              @for (row of parsedCsv(); track row) {
                <tr>
                  @for (cell of getCsvValues(row); track cell) {
                    @if (isObject(cell)) {
                      <div class="json-viewer-item">
                        <ngx-json-viewer [json]="cell"></ngx-json-viewer>
                      </div>
                    } @else {
                      <td>
                        {{ cell }}
                      </td>
                    }
                  }
                </tr>
              }
            </tbody>
          </table>
        }
        @default {
          @for (data of dataEntries(); track data) {
            <pre><code>{{ data }}</code></pre>
          }
        }
      }
    </samp>
  </div>
}


output-console.component.scss (1-9)


.console {
  max-height: 500px;
  overflow: auto;
}

.json-viewer-item {
  margin-bottom: 20px;
}

". For the xml data is there a way to make the data between each object to not be so big? Idk why but in the browser i see the data being so distanced idk why. Also add to that component a way to be able to see also the raw data also the beautify data. And also for the parsedCsv right now the ngx json viewer doesn't work idk why but i don't want that anylonger. I want here where it's a nested object inside the csv to display it as a new table. Like table in table. Here's an example of how consoleData it's received "id,data
86,{"id":32,"price":56.98085}
17,{"id":90,"price":53.10596}
27,{"id":8,"price":49.38995}
53,{"id":3,"price":40.45800}
44,{"id":27,"price":23.21195}
74,{"id":24,"price":36.49426}
98,{"id":88,"price":61.65968}
48,{"id":80,"price":59.22368}
79,{"id":37,"price":41.63973}
54,{"id":61,"price":50.45630}
". And here i will  have initially 2 column one with id and one with data. And in the data column for each row there should be again and id and a price table