Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Hazim Bayat
215
IgxTree - Select root active after first data assignment
posted

Hi,

I'm trying to have the root node of the IgxTree set active and access to the .data property (in the raised onActiveNodeChanged event) after the first assignement of the data. 

Setting the root node to active with TS works (and the event raised) but the .data property is not *fully* ready at this state!

In HTML I have
...
<igx-tree class="tree-root" (activeNodeChanged)="onActiveNodeChanged($event)" (nodeSelection)="onNodeSelectionChange($event)"
  <igx-tree-node [data]="hierachy" [expanded]="true">
  {{ hierachy.name }} {{hierachy.descriptionLong}}
  <igx-tree-node *ngFor="let type of hierachy.childs; trackBy: trackByNodeId" [data]="type">
    {{ type.descriptionLong }}
  ...

In TS I have
...
hierachy : NodeItemDTO = new NodeItemDTO();
...
ngOnInit(): void {
  this.service.getHierachy().subscribe( d => {
    this.hierachy = d;
    this.cdRef.detectChanges();
    this.treeControl.rootNodes[0].active = true;
  );
...

I was hoping that by using this.cdRef.detectChanges(); all tasks that have been completed by the assignment I can continue synchronously afterwards. But that does not work. Working with a short timeout does not work either.

Currently I have currently the following solution but this is bad in my opinon and I think there must be a clean solution available.

ngOnInit(): void {
  this.service.getHierachy().subscribe( d => {
    this.hierachy = d;
    this.cdRef.detectChanges();
    if ( this.initDataAssignmentDone==false) {
      this.initDataAssignmentDone = true;
      this.zone.onStable.pipe( first()).subscribe( () => {
      const check = () => {
        const rootNode = this.treeControl?.rootNodes?.[0];
        if (rootNode && rootNode.data.id!=undefined) {
          this.treeControl.rootNodes[0].active = true;
        }
        else {
          setTimeout(check, 50); // next loop after 50
        }
      };
      check(); // Start the loop
    });
...

What I'm doing wrong? 
Or what could be the reason that I have a valid "this.treeControl.rootNodes[0]" but that "this.treeControl.rootNodes[0].data" is available just after a while?

THX!

Parents
  • 2860
    Verified Answer
    Offline posted

    Hi Hazim,

    Thank you for contacting Infragistics Developer Support!

    I have been looking into your question and to start with, the general approach to accessing the Angular components on initialization would be the AfterViewInit lifecycle hook. By its execution time, the tree would be rendered.

    I would recommend performing any actions over the tree nodes there, including probably assigning the data, as I understand you would like the root node activated at that point.

    To demonstrate this, I created this sample app.

    A small caveat I noticed is that most probably a slight delay exists to render the nodes after the data is assigned in this way. This could be workedaround by wrapping the node activation in a requestAnimationFrame() callback for example:

      @ViewChild(IgxTreeComponent, { static: true }) public tree: IgxTreeComponent;
  public data = [];
  //...

public ngAfterViewInit(): void {
    console.log(this.tree);

    // Simulate delayed data loading
    of(DATA)
      .pipe(delay(2000))
      .subscribe((res) => {
        this.data = res;
        requestAnimationFrame(() => {
          console.log(this.tree.rootNodes);
          this.tree.rootNodes[0].active = true;
        });
      });
  }

    In conclusion, please, check out the sample and approach and let me know if they accurately demonstrate what you are trying to achieve.

    Best regards,
    Bozhidara Pachilova
    Software Developer

Reply Children
No Data