How can I trigger a node click event in an Angular tree component?
import { TREE_ACTIONS, KEYS, IActionMapping } from 'angular2-tree-component';
const actionMapping:IActionMapping = {
mouse: {
click: TREE_ACTIONS.TOGGLE_SELECTED_MULTI
},
keys: {
[KEYS.ENTER]: (tree, node, $event) => alert(`Displaying node name: ${node.data.name}`)
}
}
An important point to emphasize here is how the options object is assigned to the tree object. This step is carried out within the template, as shown below:
<tree-root [nodes]="nodes" [options]="treeOptions"></tree-root>
Subsequently, in the component.ts file, ensure that you link it as shown below:
treeOptions = { actionMapping: this.actionMapping }
It took a bit of time to figure this out, especially since the documentation lacks clarity on this particular aspect.
If you want to bind various events, you can follow the instructions provided in this example.
For instance:
<tree-root [nodes]="nodes"
(activate)="callMethodA($event)"
(deactivate)="callMethodB($event)">
</tree-root>
Here's a simple example of handling a click event:
import { TreeNode, TreeModel, TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from 'angular-tree-component';
const actionMapping:IActionMapping = {
mouse: {
click: (tree, node, $event) => {
$event.shiftKey
? TREE_ACTIONS.TOGGLE_SELECTED_MULTI(tree, node, $event)
: TREE_ACTIONS.TOGGLE_SELECTED(tree, node, $event)
}
}
};
@Component({
selector: 'category',
template: ` <div class="d-inline-block">
<tree-root #tree [nodes]="categories">
<ng-template #treeNodeTemplate let-node let-index="index">
<span>{{ node.data.name }}</span>
<button (click)="addNode(tree)">add</button>
</ng-template>
</tree-root>
</div>`,
styles : [styles]
})
export class Category implements OnInit {
public categories :any;
addNode(tree) {
this.categories[0].children.push({
name: 'a new child'
});
tree.treeModel.update();
}
Whenever a node is clicked, it becomes selected and triggers the (activate) event. You can define a method for this event by passing $event as a prop. This way, you can access the clicked node by implementing that method in your component.ts file, for example, $event.node.
<tree-root [nodes]="nodes" [options]="options" (activate)="onClick($event)"></tree-root>
public onClick(event) {
console.log('>> onClick', event.node.data);
}
import { IsString, IsNumber, IsOptional, IsUUID, Min, Max } from 'class-validator'; import { Transform } from 'class-transformer'; export class QueryCollateralTypeDto { @Transform(({ value }) => parseInt(value)) @IsNumber() @I ...
I obtained the Typescript RequireJS definition from Definitely Typed. It includes an ambient declaration of Require that clashes with the NodeJs command "require". See below for the declaration and the error message: Declaration: declare var require: Req ...
I am just starting out with React and I'm unsure about when to use mocking. For instance, within the 'ListItem' component, there is a 'click me' button that reveals a dropdown for 'cameras'. Should I focus on testing what ...
If I have a number represented by 3 bytes in hexadecimal form as 0x303132, how can I transform this number into a string of three characters with the same value - '012' - where each character represents the ASCII value of the corresponding byte? ...
Since the release of Angular version 15, it is now possible to bind standalone directives to component and directive decorators. Is there a way to utilize structural directives (with injected TemplateRef) as a hostDirective? This feature would be extremely ...
import { Component, Input, OnInit } from '@angular/core'; import {DataplansDetails} from '../../models/dataplans-details'; import * as _ from "lodash"; @Component({ selector: 'jsonform', templateUrl: './jsonform.comp ...
Imagine having the following structure for a formGroup: userGroup = { name, surname, address: { firstLine, secondLine } } This leads to creating HTML code similar to this: <form [formGroup]="userGroup"> <input formCon ...
npm ERR! syscall read npm ERR! errno ECONNRESET npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/@angular-devkit%2fbuild-angular: read ECONNRESET npm ERR! network This issue is likely caused by connectivity problems. ...
There are two main headings in my menu: Administration and Market https://i.sstatic.net/JbePq.png When I click on the Administration heading, submenus for Portfolio and Corporate Action are displayed https://i.sstatic.net/oyabv.png The issue I am facin ...
In my Nest JS service, the code structure is as follows: import { Injectable } from '@nestjs/common'; import { Model } from 'mongoose'; import { InjectModel } from '@nestjs/mongoose'; import { Collection } from './inter ...
Currently, I am in the process of working on a WebSocket Secure (WSS) server utilizing the Node ws library which can be found here. More specifically, I am following the approach outlined in this particular question, although its relevance is yet to be det ...
Let's consider the scenario below: interface Base { a: string; } interface Derived extends Base { b: string; } const x: Derived = { a: "a", b: "b", }; How can we configure the linter and/or compiler to detect any issues ...
Currently utilizing material-ui-icons v1.0.0-beta.36. I am endeavoring to incorporate a Search icon within a .tsx component. .tsx component: import React, { Component, ReactElement } from 'react' import Search from 'material-ui-icons/Sear ...
I've been working on this code snippet and I'm trying to figure out how to make it work: Array<T>.groupBy<KeyType> (property): {key: KeyType, array: Array<T> }[]; The code looks like this: type ArrayByParameter<T, KeyType = ...
I am a newcomer to Vue and Jest testing, and I keep encountering this error when running a specific test. While I understand that this is a common issue, I am struggling to pinpoint the exact cause of the problem. Here is the error message: Test suite fa ...
I am facing an issue with Angular 2 where it is searching for my component in app/app/aboutus.component, but I cannot pinpoint the source of the problem. Here is my app.component.ts code: import { Component } from '@angular/core'; import { ROUT ...
Greetings, I have encountered an issue with a regular expression in my environment.ts file. export const environment = { passwordPolicy: "^(?!.*(.)\1\1)(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}.*$" }; Unfortunately, whe ...
Currently, I am in the process of converting my React project from JavaScript to TypeScript. One challenge I encountered is that TSX React assumes all properties defined in a functional component are mandatory props. // ComponentA.tsx class ComponentA ext ...
I'm struggling to figure out the correct method for importing a Typescript npm module. Here is my current approach: module package.json { "name": "my-module", "main": "src/myModule.ts" } module src/myModule.ts export module MyModule { // Co ...
My Code <mat-form-field class="button-spacing"> <mat-select placeholder="select" [(ngModel)]="dropDownOne"> <mat-option *ngFor="let first of test1" [value]="first"> {{ first }} </mat-option> </mat-select> </mat-fo ...