Currently, I am actively involved with Angular development,
https://stackblitz.com/edit/angular-tree-un?file=src%2Fapp%2Fapp.component.html
To toggle the corresponding node, the button should be able to toggle its state. Each time the dropdown button is clicked, a value that determines whether the dropdown should change in the node is updated. A property called isSelected needs to be added to the nodes to control whether a node should be displayed or not. Although it's unclear why that vacant node is being handled differently, the normal nodes should function as described below. Utilize Akhil's code since it has already been tested, and make adjustments like so:
{
name: "Raghavendran M",
me_code: "6000001",
tl_code: "N.A.",
rs_id: "09565792-c288-4885-a4ed-3dd055f250f5",
role: "ME",
isSelected:false
}
myFunction(value,node){
node.isSelected = !node.isSelected;
}
}
<div class="dropdown">
<button (click)="myFunction(1,node)" class="dropbtn">Dropdown</button>
<div id="myDropdown" class='dropdown-content' *ngIf='node.isSelected' >
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
To enhance readability, consider maintaining the conditions as shown below instead of using if(1) and if(2):
if(value===1){
this.availableBtn = !this.availableBtn;
}
if(value===2){
this.vaccanttoggle = !this.vaccanttoggle;
}
Give this a try... I've added an additional property called isSelected for the children under TREEDATA
{
name: "Raghavendran M",
me_code: "6000001",
tl_code: "N.A.",
rs_id: "09565792-c288-4885-a4ed-3dd055f250f5",
role: "ME",
isSelected:false
}
myFunction(value,node){
if(value==1){
this.availableBtn = !this.availableBtn;
if(!this.availableBtn){
node.isSelected=false;
}else{
node.isSelected=true;
}
}
if(value==2){
this.vaccanttoggle = !this.vaccanttoggle;
}
}
in HTML ->
<div class="dropdown">
<button (click)="myFunction(1,node)" class="dropbtn">Dropdown</button>
<div id="myDropdown" class='dropdown-content' *ngIf='availableBtn && node.isSelected' >
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
Having some issues with implementing AWS Cognito login in Nest.js? Check out this helpful guide on token validation: https://medium.com/weekly-webtips/token-validation-with-aws-cognito-and-nestjs-6f9e4088393c. I need to add a feature where users receive ...
After receiving a timestamp from the server, I am trying to update an input field with that date value. Even though the server sends the correct data, the input field remains empty without any errors appearing. private profileFormGroup = this.fb.group({ ...
I am looking for a solution to efficiently share CSS and TS code across multiple Angular projects. Simply copy-pasting the code is not an ideal option. Is there a better way to achieve this? ...
HTML <input #autoC auto-complete [(ngModel)]="myData" [source]="mySource" /> TS @ViewChild('autoC') auto: ElementRef; Upon using ViewChild, I am able to reference the input element and access the auto-complete attributes. However, I am ...
I am currently working on developing a d3 v4 plugin by following the guidelines provided at . My main objective is to be able to npm install the plugin and seamlessly use it within an Angular 2/4 component. The repository for my project can be found here: ...
After receiving a file object via an HTML input on-change event in my component.html: onFileSelected(event) { this.selectedFile = event.target.files[0]; } Now, I need to send a POST request to upload the image to the database. The database only acc ...
Wondering about classes and extensions in TypeScript? Let's take a look at an example: We have a base class called Report, with another class named Datasheet that extends from Report. An extension has been added to the Report class, and the goal is ...
To retrieve information, I plan to use pagination in order to specify a particular page number within the API URL and fetch additional data by updating the value of page. The process of fetching data in my server component is as follows: // fetchData.tsx ...
I am facing an issue with my sign-in page and sign-up button. When the button is clicked, it should route to /sign-up. My expectation is that only the sign-up component should be displayed on the /sign-up page, but in reality, both the sign-up and sign-in ...
Check out the following code snippet: <select formControlName="test"> <option value="1">A</option> <option value="2"& selected>B</option> <option value="1">C</option> ...
I am looking to display this block only after clicking a button. Can someone help me achieve this in Angular? <div>Hello from some div block!</div> I have attempted the following: <button (click)="assign()">Button</button> <di ...
Currently, I am developing a project in NextJs 14 and utilizing the App Router. In my server component app/blogs/[slug]/page.tsx, I have written the following code: import { Metadata } from "next"; type GenerateMetadataProps = { params: { slug ...
In my HTML file, I have the following code snippet: <tr *ngFor="let package of packages"> <td *ngFor="let coverage of coverages"> <input type="hidden" #dynamicID [value]="coverage.id"> <-- Include an identifier with the vari ...
I came across this solution for fetching all attributes using protractor: Get all element attributes using protractor However, I am working with TypeScript and Angular 6 and struggling to implement the above method. This is what I have tried so far: im ...
My route is configured as /abc/:id/xyz The abc/:id portion directs to ComponentA, with /xyz being a nested component displayed within a router-outlet (ComponentB) Upon navigating to /abc/:id/xyz, I utilize this.route.params.subscribe(...) (where route is ...
I am working with the following code block: interface Interface<T> { submit: T, children: (ctx: { test: string, info: string }) => React.ReactNode | ReactElement; } const Test: React.FC<Interface<T>> = ({submit, children}) =& ...
I am currently working on creating a reusable component for my application that may display a control button at times and hide it at others. My ideal scenario would involve utilizing the presence or absence of an attribute to determine whether the control ...
Currently, I am in the process of developing a new SharePoint Web Part using SPFx generated by Yeoman. The scaffolding template is working well and I have encountered no issues adding NPMs for JQuery and JQueryUI. As I run GULP SERVE, everything seems to b ...
I've implemented a post method using Angular's HttpClient. While attempting to subscribe to the response for additional tasks, I encountered the following error: Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{}, ...
I'm currently working on developing a customized hook for axios, but I've encountered the following error: Argument of type 'unknown' is not assignable to parameter of type 'SetStateAction<AxiosError<unknown, any> | unde ...