Need to show a textbox on double click for the particular primeng tree node

Question

I have a primeng tree node. When I click the node label, it should turn into a text box but for only to that node. I tried with a Boolean flag, it works but shows up all textbox. Is there a simple fix to show up the text box only for that node?

Here is my code

.ts

import { Component, OnInit } from '@angular/core';
import { NodeService } from './nodeservice';
import { TreeNode } from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  nodes: TreeNode[];
  showText = false;

  constructor() {}

  ngOnInit() {
    this.nodes = [
      {
        key: '0',
        label: 'Introduction',
        children: [
          { key: '0-0', label: 'What is Angular' },
          { key: '0-1', label: 'Getting Started' },
          { key: '0-2', label: 'Learn and Explore' },
          { key: '0-3', label: 'Take a Look' },
        ],
      },
    ];
  }

  showTextbox() {
    this.showText = true;
  }
}

.html

<p-tree [value]="nodes">
  <ng-template let-node pTemplate="default">
    <div  *ngIf="!showText" (dblclick)="showTextbox()">
      <b>{{ node.label }}</b>
    </div>
    <div *ngIf="showText">
    <input type="text" [value]="node.label" />
  </div>
  </ng-template>
</p-tree>

Here is the stackblitz link.

ngShravil.py · Accepted Answer · 2022-05-15T17:48:05.710

This can be achieved by using new flags.

.html

<div *ngIf="showTextForNodeId != node.key || !showText"
  (dblclick)="showTextbox(node.key)">
    <b>{{ node.label }}</b>
</div>
<div *ngIf="showTextForNodeId == node.key && showText">
  <input type="text"
    [value]="node.label"
    (blur)="updateNode($event.target.value, node.key)"
  />
</div>

.ts

showTextForNodeId = undefined;
showText = false;

showTextbox(key) {
  this.showTextForNodeId = key;
  this.showText = true;
}

updateNode(newName, key) {
  this.findAndUpdateNode(this.nodes, newName, key);

  this.showTextForNodeId = undefined;
  this.showText = false;
}

findAndUpdateNode(nodes, newName, key) {
  for (let i = 0; i < nodes.length; i++) {
    if (nodes[i].key == key) {
      nodes[i].label = newName;
    } else if (nodes[i].children) {
      this.findAndUpdateNode(nodes[i].children, newName, key);
    }
  }
}

P.S.: Please check for the edge cases, if they exist.

Need to show a textbox on double click for the particular primeng tree node

1 Answers1