Simple Component that dumps prettified data in any template.

debug.component.ts

import { Component, Input } from '@angular/core';

@Component({
  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;
}