How to get Array object from Angular custom infinity tree view when I am clicking on the child tree

Question

I am a Angular front-end developer. I have created an Angular infinity tree view. Normally the tree view showing correct but when I am clicking on the child tree I want to get the child tree object with his sub tree object. But problem is when I am clicking on the child tree it's showing full parent tree data in my console.

Please see my current code and functionality below:

Tree view component HTML:

<h2>{{ category!.Title }}</h2>
<ul *ngIf="category!.Children.length > 0">
    <li style="margin-left: 20px;" *ngFor="let child of category!.Children" (click)="showVal(child)">
        <b>></b> <app-tree-view-folder [category]="child"></app-tree-view-folder>
    </li>
</ul>

Tree view component TS:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
export interface Category {
  Title: string;
  Children: Category[];
}
@Component({
  selector: 'app-tree-view-folder',
  templateUrl: './tree-view-folder.component.html',
  styleUrls: ['./tree-view-folder.component.css']
})
export class TreeViewFolderComponent implements OnInit {
  
  @Input() category: Category | undefined;
  @Output() clickOutside = new EventEmitter<any>();

  constructor() { }

  ngOnInit(): void {}

  showVal(data:any){
    this.clickOutside.emit(data);
  }
}

Where I am using this tree:

<app-tree-view-folder
  [category]="category"
  (clickOutside)="getCurrentData($event)">
</app-tree-view-folder>

And In TS file:

  category = {
    Title: "Categorie Root",
    Children: [
      {
        "Title": "Categorie A",
        "Children": [ 
          {
            "Title": "Sub Categorie A",
            "Children": []
          }
        ]
      },{
        "Title": "Categorie B",
        "Children": [
          {
            "Title": "Sub Categorie B",
            "Children": [
              {
                "Title": "Sub Sub Categorie A",
                "Children": [
                  {
                    "Title": "Sub Sub Categorie AA",
                    "Children": []
                  }
                ]
              }
            ]
          },
          {
            "Title": "Sub Categorie BB",
            "Children": []
          },
          {
            "Title": "Sub Categorie BBBB",
            "Children": []
          }
        ]
      }
    ]
  }
  getCurrentData(data:any){
    console.log(data);
  }

I hope some one have the solutions for this problem. Thanks

Answer 1

Just you need pass the event and use event.stopPropagation. But you need add the event (clickOutside) to the "inner threeview"

<ul *ngIf="category!.Children.length > 0">

  <!--see how pass futhermore the "data" the "$event"-->
  <li style="margin-left: 20px;" *ngFor="let child of category!.Children" 
      (click)="showVal($event,child)">
      <b>>{{child.Title}}</b> 

     <!--see how you add the event (clickOutSide)-->
     <app-tree-view-folder (clickOutside)="clickOutside.emit($event)" 
        [category]="child" ></app-tree-view-folder>
  </li>
</ul>

The showVal becomes like

  showVal(event:Event,data:any){
    event.stopPropagation();
    this.clickOutside.emit(data);
  }

the stackblitz