This is inspired by the stackblitz example of Angular application. Im seeing error specifically telling:
Error: Object too large to inspect. Open your browser console to view.
When I open the stackblitz console and browser console it specifies the same error in chrome dev tools.
For reference I'm attaching similar reproducing stackblitz example here
Whats the root cause of it? How to avoid such a error in stackblitz examples?
Here is my HTML code:
<mat-form-field>
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Filter" #input>
</mat-form-field>
<table
mat-table
[dataSource]="formdataarray.controls"
multiTemplateDataRows
class="mat-elevation-z8" matSort
>
<ng-container
matColumnDef="{{column}}"
*ngFor="let column of columnsToDisplay"
>
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{column}}</th>
<td mat-cell *matCellDef="let element"> {{ element.value[column] }} </td>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail">
<td
mat-cell
*matCellDef="let element"
[attr.colspan]="columnsToDisplay.length"
>
<div
class="example-element-detail"
[@detailExpand]=" element.rowEdit == true ? 'expanded':'collapsed' "
>
<ng-container>
<div class="example-element-description">
<td class="example-element-weight">
<ng-template pTemplate="input">
<input
pInputText
type="text"
[(ngModel)]="element.testhiddencol1"
/>
</ng-template>
<ng-template pTemplate="output">
{{element.testhiddencol1}}
</ng-template>
</td>
</div>
</ng-container>
<div class="example-element-description">
<td class="example-element-weight">{{element.description}}</td>
</div>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr
mat-row
*matRowDef="let element; columns: columnsToDisplay;"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
(click)="rowClicked(element)"
></tr>
<tr
mat-row
*matRowDef="let row; columns: ['expandedDetail']"
class="example-detail-row"
></tr>
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
</tr>
</table>
And my component.ts is file :
import { AfterViewInit, Component, OnInit, ViewChild } from "@angular/core";
import { MatSort } from "@angular/material/sort";
import { MatTableDataSource } from "@angular/material/table";
import {
animate,
state,
style,
transition,
trigger,
} from "@angular/animations";
import { Table, TableService } from "primeng/table";
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
import { ThrowStmt } from '@angular/compiler';
/**
* @title Table with expandable rows
*/
@Component({
selector: "table-expandable-rows-example",
styleUrls: ["table-expandable-rows-example.css"],
templateUrl: "table-expandable-rows-example.html",
providers: [
TableService,
{
provide: Table,
},
],
animations: [
trigger("detailExpand", [
state("collapsed", style({ height: "0px", minHeight: "0" })),
state("expanded", style({ height: "*" })),
transition(
"expanded <=> collapsed",
animate("225ms cubic-bezier(0.4, 0.0, 0.2, 1)")
),
]),
],
})
export class TableExpandableRowsExample implements AfterViewInit, OnInit {
constructor(private fb: FormBuilder) {
}
formData: FormGroup = new FormGroup({});
formdataarray: FormArray = new FormArray([]);
dataSource = new MatTableDataSource([]);
@ViewChild(MatSort) sort: MatSort;
columnsToDisplay = ["rowEdit", "name", "weight", "symbol", "position", "investorName"];
expandedElement: PeriodicElement | null;
ngOnInit() {
this.formData = this.fb.group({
rowEdit: [],
name: [],
weight: [],
symbol: [],
position: [],
investorName: []
})
for(let i =0; i<ELEMENT_DATA.length;i++){
this.formdataarray.push(
this.fb.group({
rowEdit: ELEMENT_DATA[i].rowEdit,
name: ELEMENT_DATA[i].name,
weight: ELEMENT_DATA[i].weight,
symbol: ELEMENT_DATA[i].symbol,
position: ELEMENT_DATA[i].position,
investorName: ELEMENT_DATA[i].investorName
})
)
}
}
ngAfterViewInit() {
console.log("$$$$$$$", this.sort)
this.dataSource.sort = this.sort;
}
rowClicked(row: PeriodicElement): void {
console.log(row);
row.rowEdit = true;
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
console.log(filterValue);
this.dataSource.filter = filterValue.trim().toLowerCase();
}
}
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
description: string;
testhiddencol1: string;
rowEdit: boolean;
investorName: string;
}
const CO_MANAGER_DATA: string[] = [
"Manager 1",
"Manager 2",
"Manager 3",
"Manager 4",
];
const ELEMENT_DATA: PeriodicElement[] = [
{
position: 1,
name: "Hydrogen",
weight: 1.0079,
symbol: "H",
description: `Hydrogen is a chemical element with symbol H and atomic number 1. With a standard
atomic weight of 1.008, hydrogen is the lightest element on the periodic table.`,
testhiddencol1: "testhiddencol1",
rowEdit: false,
investorName: "abc investor"
},
{
position: 2,
name: "Helium",
weight: 4.0026,
symbol: "He",
description: `Helium is a chemical element with symbol He and atomic number 2. It is a
colorless, odorless, tasteless, non-toxic, inert, monatomic gas, the first in the noble gas
group in the periodic table. Its boiling point is the lowest among all the elements.`,
testhiddencol1: "testhiddencol1",
rowEdit: false,
investorName: "abc investor"
},
{
position: 3,
name: "Lithium",
weight: 6.941,
symbol: "Li",
description: `Lithium is a chemical element with symbol Li and atomic number 3. It is a soft,
silvery-white alkali metal. Under standard conditions, it is the lightest metal and the
lightest solid element.`,
testhiddencol1: "testhiddencol1",
rowEdit: false,
investorName: "cde investor"
},
{
position: 4,
name: "Beryllium",
weight: 9.0122,
symbol: "Be",
description: `Beryllium is a chemical element with symbol Be and atomic number 4. It is a
relatively rare element in the universe, usually occurring as a product of the spallation of
larger atomic nuclei that have collided with cosmic rays.`,
testhiddencol1: "testhiddencol1",
rowEdit: false,
investorName: "fgh investor"
},
{
position: 5,
name: "Boron",
weight: 10.811,
symbol: "B",
description: `Boron is a chemical element with symbol B and atomic number 5. Produced entirely
by cosmic ray spallation and supernovae and not by stellar nucleosynthesis, it is a
low-abundance element in the Solar system and in the Earth's crust.`,
testhiddencol1: "testhiddencol1",
rowEdit: false,
investorName: "abc investor"
},
{
position: 6,
name: "Carbon",
weight: 12.0107,
symbol: "C",
description: `Carbon is a chemical element with symbol C and atomic number 6. It is nonmetallic
and tetravalent—making four electrons available to form covalent chemical bonds. It belongs
to group 14 of the periodic table.`,
testhiddencol1: "testhiddencol1",
rowEdit: false,
investorName: "ijk investor"
},
{
position: 7,
name: "Nitrogen",
weight: 14.0067,
symbol: "N",
description: `Nitrogen is a chemical element with symbol N and atomic number 7. It was first
discovered and isolated by Scottish physician Daniel Rutherford in 1772.`,
testhiddencol1: "testhiddencol1",
rowEdit: false,
investorName: "lmn investor"
},
{
position: 8,
name: "Oxygen",
weight: 15.9994,
symbol: "O",
description: `Oxygen is a chemical element with symbol O and atomic number 8. It is a member of
the chalcogen group on the periodic table, a highly reactive nonmetal, and an oxidizing
agent that readily forms oxides with most elements as well as with other compounds.`,
testhiddencol1: "testhiddencol1",
rowEdit: false,
investorName: "lm investor"
},
{
position: 9,
name: "Fluorine",
weight: 18.9984,
symbol: "F",
description: `Fluorine is a chemical element with symbol F and atomic number 9. It is the
lightest halogen and exists as a highly toxic pale yellow diatomic gas at standard
conditions.`,
testhiddencol1: "testhiddencol1",
rowEdit: false,
investorName: "test investor"
},
{
position: 10,
name: "Neon",
weight: 20.1797,
symbol: "Ne",
description: `Neon is a chemical element with symbol Ne and atomic number 10. It is a noble gas.
Neon is a colorless, odorless, inert monatomic gas under standard conditions, with about
two-thirds the density of air.`,
testhiddencol1: "testhiddencol1",
rowEdit: false,
investorName: "xyz investor"
},
];
Dunno what's wrong, but comment the following line
console.log("$$$$$$$", this.sort)
and the error disappears.