app.component.html

<ng-template let-item="item" #referenceTemplate>
  <div class="reference-template-container" [ngSwitch]="item.hasIn(['record', '$ref'])">
    <span *ngSwitchCase="true">
      <i class="fa fa-check-circle success" aria-hidden="true"></i>
      <a href="{{item.getIn(['record', '$ref'])}}" target="_blank">{{item.getIn(['reference', 'misc', 0])}}</a>
    </span>
    <span *ngSwitchDefault>
      <i class="fa fa-exclamation-triangle warning" aria-hidden="true"></i>
      {{item.getIn(['reference', 'misc', 0])}}
    </span>
  </div>
</ng-template>

<ng-template #patchesHeaderTemplate>
  <span>Patches (Conflicts) actions:</span>
</ng-template>

<json-editor *ngIf="record && schema"
  [config]="config"
  [(record)]="record"
  [(jsonPatches)]="patches"
  [problemMap]="problemMap"
  [schema]="schema"
  [templates]="{
    referenceTemplate: referenceTemplate,
    patchesHeaderTemplate: patchesHeaderTemplate
  }">
</json-editor>