Angular 6 pretty print json on html (can be array / object)

recursive-object.component.ts

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

@Component({
  selector: 'app-recursive-object',
  template: `
    <span *ngIf="isArray(items)">[</span>
    <span *ngIf="!isArray(items)">{{ '{' }}</span>

    <div *ngFor="let key of objectKeys(items)" class="ml-3">
      <span *ngIf="!isArray(items)">{{ key }}: </span>
      <span *ngIf="!isObject(key)">{{ items[key] }},</span>
      <app-recursive-object *ngIf="isObject(key)" [items]="items[key]"></app-recursive-object>
    </div>

    <span *ngIf="isArray(items)">],</span>
    <span *ngIf="!isArray(items)">{{ '},' }}</span>
  `
})
export class RecursiveObjectComponent {
  @Input() items;

  objectKeys(items) {
    return Object.keys(items);
  }

  isObject(key) {
    return typeof this.items[key] === 'object';
  }

  isArray(items) {
    return Array.isArray(items);
  }
}