Htykuut

Hello i have the following problem.
I have a recursive component NodeComponent with which i create a TreeView.

The problem is that i do not know how to deal when i am disposing the root Node.
For deleting particular nodes in the hierarchy i call a service to which i pass the current node and its parent.The services then splices the element away and ngFor takes care of it visually.

For the root how can i notify the `container component to close the whole thing down?

Model

export interface TreeModel{

    id:string;

    children:Array<TreeModel>;

}

Container Component

export class TreeViewComponent implements OnInit {

  constructor(private treeService: HtmlGeneratorService) {



  }

  ngOnInit() {

  }

  public root: TreeModel;

}



<div class="row">

    <app-node  [model]="root" [parent]="null" [settings]="settings" ></app-node>



  </div>

Recursive Component

      @Component({

            selector: 'app-node',

            templateUrl: './node.component.html',

            styleUrls: ['./node.component.css']

            })

            export class NodeComponent implements OnInit, OnChanges {

              public isExpanded:boolean=true;



              constructor(private htmlService:HtmlGeneratorService) { }



              onDelete():void{

               if(this.parent==null){



               }

            this.htmlService.deleteNode(this.parent,this.model);

          }

              public onExpand():void{

                this.isExpanded=!this.isExpanded;

              }



              @Input()

              public model:TreeModel;



              @Input()

              public parent:TreeModel;

            }



        <div class="content-delete"><button (click)="onDelete()">Delete</button> 

        </div>



        <div>

           <ul>

             <li  *ngFor="let item of model.children">

                <div class="childNode">

                   <app-node [parent]="model" [model]="item"></app-node>

                </div>

            </li>

           </ul>

      </div>

DeleteService

export class HtmlGeneratorService {

 public deleteNode(parent:TreeModel,child:TreeModel){

     if(parent==null){

       //do what ? i can i emit an event that the `TreeViewComponent` can respond?

     }

     var childIndex=parent.children.findIndex(x=>x.id==child.id);



     parent.children.splice(childIndex,1);

  }

}

As you can see in my service i do not know how to notify my TreeViewComponent.The only solution that i see is i have to have a special field in my NodeComponent that would get set true only for the root component.If i would do it like this ..wouldn't it be inefficient?Basically allocating a variable in all Nodes just for checking for root -to be used by the container ?