I have a tree component in which the tree root isn't being rendered. I am working in angular 12, and when I implemented the tree component I did everything as stated in the documentation. But nothing that is inside the tree-node is visible in the view. My code consist of html:

<div class="ibox float-e-margins col-lg-12" style="display: table; word-break: break-word;">
    <div class="ibox-content panel-body" style="display: table-cell; padding: 0; vertical-align: top; border-top: 0px">
        <button (click)="update()">update tree nodes ss</button>

        <tree-root #tree [nodes]="nodes" [options]="treeOptions">
            <ng-template #treeNodeFullTemplate let-node let-index="index" let-templates="templates">
                <div >
                    <div #treeNode [style.cursor]="node.hasChildren ? 'pointer' : 'normal'">
                        <span>
                            <span>
                                <i (click)="node.mouseAction('expanderClick', $event)">+</i>
                            </span>
                            <span (click)="node.hasChildren ? node.mouseAction('expanderClick', $event) : null">{{
                                node.data.name }}</span>
                        </span>
                    </div>
                    <tree-node-children [node]="node" [templates]="templates"></tree-node-children>
                </div>
            </ng-template>
        </tree-root>
    </div>
</div>

and typescript:

import { Component, VERSION, NgZone } from '@angular/core';
import {
  IActionMapping,
  KEYS,
  TreeModel,
  TreeNode,
  TREE_ACTIONS,
  ITreeOptions,
} from '@circlon/angular-tree-component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  selectedNodeSet = new Set([6]);
  nodes = [
    {
      id: 1,
      name: 'root1',
      children: [
        { id: 2, name: 'child1' },
        { id: 3, name: 'child2' },
      ],
    },
    {
      id: 4,
      name: 'root2',
      children: [
        { id: 5, name: 'child2.1' },
        {
          id: 6,
          name: 'child2.2',
          children: [{ id: 7, name: 'subsub' }],
        },
      ],
    },
  ];
  actionMapping: IActionMapping = {
    mouse: {
      contextMenu: (tree, node, $event) => {
        $event.preventDefault();
      },
      checkboxClick: (tree, node: TreeNode, $event) => {
        $event.stopPropagation();
        node.toggleSelected();
        if (this.selectedNodeSet.has(node.id)) {
        }
      },
      dblClick: (tree, node, $event) => {
        if (node.hasChildren) {
          TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
        }
      },
      click: (tree: TreeModel, node: TreeNode, $event) => {},
      expanderClick: (tree, node: TreeNode, $event) => {
        TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
      },
    },
    keys: {
      [KEYS.ENTER]: (tree, node, $event) => alert(`This is ${node.data.name}`),
    },
  };
  public treeOptions: ITreeOptions = {
    actionMapping: this.actionMapping,
    useCheckbox: true,
  };

  constructor(private ngZone: NgZone) {}

  update() {
    const temp = JSON.parse(JSON.stringify(this.nodes));
    temp[0].name = 'after update root1';
    this.nodes = temp;
  }
}

The result when run is : When i run the same code in a new project everything is fine .

Does anybody has any idea what can be wrong?