There's probably a nicer Angular or JS JSON Tree viewer, but this can get you started. You need to recursively iterate through your objects.

I'm using recursive template outlets here, you may be able to do components (and if you need to add other functionality its probably worth looking into that).

Here's a demo on stack blitz: https://stackblitz.com/edit/angular-ivy-qadvlr?file=src%2Fapp%2Fapp.component.ts

Example component, it just has your data as an array, and a helper method to try and determine the type of value we got passed in, since its type will determine how we need to display it.

export class AppComponent  {
  data1 = [
    {
      "name": "d1",
      "days": [
        "monday",
        "wednesday",
      ],
      "options": {
        "name": "o1",
        "extras": [],
        "temp": [
          "12",
          "25",
          "12"
        ]
      }
    },
    {
      "name": "d2",
      "days": [
        "tuesday",
        "wednesday",
      ],
      "options": {
        "name": "o2a",
        "extras": [
          {
            name: 'extra 1'
          }
        ],
        "temp": [
          "22",
          "25",
          "12"
        ]
      }
    }
  ]

  getType(val: any) {
    if (Array.isArray(val)) {// aray's will be type of "object" so need specail cases, and possibly others but this is a good start
      return 'array';
    } else if (typeof val === 'string' || val instanceof String) {
      return 'string';
    } else if (typeof val === 'boolean') {
      return 'boolean';
    } else if (typeof val === "object") {
      return 'object'
    }
  }

}

Kinda messy, recursive templates that don't care about property names. Instead we use Angular's keyvalue pipe to get the keys/values of an object.

<ul *ngFor="let someObj of data1;">
  <ng-container *ngTemplateOutlet="objectTemplate; context: {obj: someObj}"></ng-container>
</ul>


<ng-template #recursiveTemplate let-key="key" let-valueType="valueType" let-value="value">
  {{key}}

  <ng-container [ngSwitch]="valueType">

      <ng-container *ngSwitchCase="'array'">
        <ng-container *ngTemplateOutlet="arrayTemplate; context: { value: value}"></ng-container>
      </ng-container>

      <ng-container *ngSwitchCase="'object'">
        <ul>
        <ng-container *ngTemplateOutlet="objectTemplate; context: {obj: value}"></ng-container>
        </ul>
      </ng-container>

      <!-- anything we might have missed or don't needs anything special for, just show it as JSON -->
      <ng-container *ngSwitchDefault>
         {{key ? "- " : ""}}{{value | json}}
      </ng-container>

  </ng-container>
</ng-template>

<ng-template #arrayTemplate let-value="value">
  <ul>
    <li *ngFor="let child of value;">
        <ng-container *ngTemplateOutlet="recursiveTemplate; context:{ key:null, valueType: getType(child), value: child }"></ng-container>
    </li>
  </ul>
</ng-template>

<ng-template #objectTemplate let-obj="obj">
  <li *ngFor="let item of obj | keyvalue;">
  <ng-container *ngTemplateOutlet="recursiveTemplate; context:{ key:item.key, valueType: getType(item.value), value: item.value }"></ng-container>
  </li>
</ng-template>

I'm the author of https://github.com/rodikh/angular-json-editor.

It's basically a directive wrapper for jdorn's json-editor. His project is very popular and in active development. Both it, and my wrapper are safe to use.

If you have any feature requests or issues with my wrapper, feel free to submit an issue on github and I'll try my best to resolve them.