How to get the top most level object in a nested structure in Angular component

I am trying to build a query builder using Angular similar to JQuery builder.I am facing an issue with respect to emitting the data.

When I click the addGroup, addRule buttons then the new group is getting added to the array at the specified level. Now I want the entire object structure including the one which got pushed. How to get that from HTML to component ?

For example, If the Initial structure is :

{
  "condition": "AND",
  "rules": [
    {
      "id": "price",
      "field": "price",
      "type": "double",
      "input": "number",
      "operator": "less",
      "value": 10.25
    },
   
  ],
  "valid": true
}

And I have added the newGroup now, so the latest structure is:

{
  "condition": "AND",
  "rules": [
    {
      "id": "price",
      "field": "price",
      "type": "double",
      "input": "number",
      "operator": "less",
      "value": 10.25
    },
    {
      "condition": "OR",
      "rules": [
        {
          "id": "category",
          "field": "category",
          "type": "integer",
          "input": "select",
          "operator": "equal",
          "value": 2
        },
        {
          "id": "category",
          "field": "category",
          "type": "integer",
          "input": "select",
          "operator": "equal",
          "value": 1
        }
      ]
    }
  ],
  "valid": true
}

I want this entire object to be available in component in addGroup method.There can be n number of nested levels and I want the entire object.

Working Code:text

We can use a service and store this entire object reference in one of the service properties, which we can access from anywhere within the querybuilder!

query.service.ts

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

@Injectable({
  providedIn: 'root',
})
export class QueryService {
  entireObject: any;
  constructor() {}
}

app.component.ts

...
constructor(private queryService: QueryService) {}

ngOnInit() {
    this.queryService.entireObject = this.json;
}
...

rule-group.component.ts

 ...
 constructor(private queryService: QueryService) {}
 ...

 ...
 addGroup(index: number) {
    const newGroup = {
      condition: 'AND',
      rules: [
        {
          field: 'rule',
          operator: 'op',
          value: 'value',
        },
      ],
      valid: true,
    };
    if (!this.group.rules) {
      this.group.rules = [];
    }
    this.group.rules.push(newGroup);
    // I want to emit the entire object structure not just the one which is added now. How to get the entire top level object from HTML.
    console.log(this.queryService.entireObject);
  }
  ...