src/components/data-visualizer/data-visualizer.component.ts
This component renders JSON in a readable way.
OnDestroy
| selector | fs-data-visualizer |
| styleUrls | ./data-visualizer.component.scss |
| templateUrl | ./data-visualizer.component.html |
Properties |
|
Methods |
constructor(componentData: CmsComponentData
|
||||||||||||
|
Parameters :
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| Public componentData |
Type : CmsComponentData<CmsComponent>
|
| dataAsString |
Type : string | null
|
| sub$ |
Type : Subscription
|
import { ChangeDetectorRef, Component, NgZone, OnDestroy } from '@angular/core';
import { CmsComponent } from '@spartacus/core';
import { CmsComponentData } from '@spartacus/storefront';
import { Subscription } from 'rxjs';
/**
* This component renders JSON in a readable way.
*
* @export
* @class DataVisualizerComponent
*/
@Component({
selector: 'fs-data-visualizer',
templateUrl: './data-visualizer.component.html',
styleUrls: ['./data-visualizer.component.scss'],
standalone: false
})
export class DataVisualizerComponent implements OnDestroy {
dataAsString: string | null;
sub$: Subscription;
constructor(public componentData: CmsComponentData<CmsComponent>, private changeDetectorRef: ChangeDetectorRef, private ngZone: NgZone) {
this.sub$ = componentData.data$.subscribe((newComponentData: CmsComponent) => {
this.ngZone.runTask(() => {
this.dataAsString = JSON.stringify(newComponentData, null, 2);
this.changeDetectorRef.markForCheck();
});
});
}
ngOnDestroy(): void {
if (this.sub$) {
this.sub$.unsubscribe();
}
}
}
<ng-container *ngIf="dataAsString; else noData">
<div class="outer-container">
<h1>The following payload will be passed to section '{{ this.componentData.uid }}':</h1>
<div class="container">
<button [cdkCopyToClipboard]="dataAsString">Copy to clipboard</button>
<div class="data-container">
<pre #dataElement [innerHTML]="dataAsString"></pre>
</div>
</div>
</div>
</ng-container>
<ng-template #noData>No data available.</ng-template>
./data-visualizer.component.scss
:host {
display: flex;
overflow: hidden;
border-radius: 12px;
border: 2px solid #3f4b5c;
}
.outer-container {
min-width: 100%;
padding: 30px 20px 20px;
}
.container {
position: relative;
transform: rotate(0deg);
min-width: 100%;
padding: 0;
}
button {
position: fixed;
top: 25px;
right: 40px;
min-width: 85px;
font-size: 0.95em;
background-color: #0099c5;
color: #ffffff;
border: 0;
min-height: 45px;
display: flex;
justify-content: center;
align-items: center;
padding: 4px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
cursor: pointer;
}
pre {
overflow: auto;
max-height: 50vh;
padding: 10px;
margin: 0;
background-color: #181e26;
color: #fff;
font-family: monospace;
font-size: 1em;
line-height: 1;
border-radius: 12px;
}