Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Simple Component that dumps prettified data in any template.
import { Component, Input } from '@angular/core';
selector: 'dump',
template: `
<pre><code>{{data | json}}</code></pre>
styles: [
:host {
display: block;
pre {
background: #f3f3f3;
border: 2px dashed;
font-size: 0.75rem;
padding: 1rem;
position: relative;
code {
overflow: auto;
max-height: 300px;
display: block;
text-shadow: 0 -1px white;
pre::before {
position: absolute;
left: 0;
top: 0;
content: 'Data Debug 🐛';
transform: translate3d(50%, -50%, 0);
padding: 0.25rem;
color: tomato;
border: 2px solid black;
background: white;
export class DataDumpComponent {
@Input() data;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.