Is there a way to verify the selected navigation item in the console?

Need help with checking the selected navigation using console.log?

export const navItems: NavData[] = [
  {
    name: 'Book #1',
    url: '/book',
    icon: 'fa fa-book',
    children: [{
      name: 'Book #2',
      url: '/book',
      icon: 'fa fa-pencil'
    },{
      name: 'Shopping Plan',
      url: '/plan',
      icon: 'fa fa-shopping-cart',
    }]
  }
]

If you click on "Shopping Plan" in the sideNav, the console will display "Shopping Plan". If you click on "Book #2", the console will show "Book #2". In simpler terms, how can you log the selected navigation item to the console?

This is the HTML code for reference:

  <app-sidebar [fixed]="true" [display]="'lg'">
    <app-sidebar-nav [navItems]="navItems" [perfectScrollbar] [disabled]="sidebarMinimized"></app-sidebar-nav>
    <app-sidebar-minimizer></app-sidebar-minimizer>
  </app-sidebar>
angulartypescript

Answer №1

From what I understand, achieving this functionality from a higher-level component may not be possible based on the code provided. To make this work, you would need to make modifications to the app-sidebar-nav component and add a (click) listener to the list items that contain the navItems. In the HTML structure of your app-sidebar-nav component, ensure it resembles the following by adding a (click) event:

<ul>
<li ngFor="let item of navItems" (click)="showInConsole(item.name)">{{item.name}}</li>
</ul>

Additionally, in your component file, include the following method:

showInConsole(name){
console.log(name);}

Answer №2

Here is an example of how I create HTML with an assigned (click) event:

<app-sidebar-nav 
  [navItems]="navItems" 
  [perfectScrollbar] 
  [disabled]="sidebarMinimized"
  (click)="onItemClick($event)">
</app-sidebar-nav>

In addition, I include a function in typescript to handle this event:

  onItemClick(e){
    console.log(e.srcElement.innerText);
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Messing with onBeforeUnload causes issues with the browsing history in Angular

After the user finishes entering data on a page, my goal is for them to return to the previous page (e.g. Main Page -> Input Page). If I redirect them when they click submit, it creates a circular history loop (Main Page -> Input Page -> Main Page ...

angularonbeforeunloadangular-routerangular-router-guards

Assign a distinct color to a row depending on the row's characteristic

One of my tasks involves implementing row highlights with specific colors based on their attributes. For instance, when displaying employee records, I need to show all employees whose highest education column is not null in green. The current code snippet ...

angular

Experiencing difficulties establishing a connection with my NodeJs server socket and TypeScript

I've been struggling to run the code from this post and I really need some help. The code can be found at: https://medium.com/@mogold/nodejs-socket-io-express-multiple-modules-13f9f7daed4c. I liked the code as it seems suitable for large projects, but ...

node.jstypescriptexpresssocketssocket.io

The Angular Tooltip feature is unable to interpret the characters "' '" or "' '"

Let me explain the scenario: I am receiving a list of objects from my back-end service, which I then break apart using ngFor and display accordingly. Each item in the list has an associated toolTip that provides additional information. The info for each i ...

htmlangulartypescript

The Unit Test for Angular NgRx is not passing as expected

I'm facing difficulties with my unit tests failing. How can I verify that my asynchronous condition is met after a store dispatch? There are 3 specific checks I want to perform: 1/ Ensure that my component is truthy after the dispatch (when the cond ...

htmlangulartypescriptunit-testingngrx

Ways to initiate SVG animations using Angular Component functions?

I am currently working on a project where I want to incorporate an animation that reflects the sorting process of an array of numbers. However, despite successfully sorting the numbers in the array, I am facing challenges with triggering the animations. I ...

javascriptangularsvg

Duplicate the ng-template using ng-content as the body (make a duplicate of ng-content)

I have been working on creating a feature that allows users to add custom columns to a PrimeNg table. The main reason for developing this feature is to provide users with a default table that already has numerous configuration options pre-set. However, I ...

angulartypescriptprimengtransclusion

Angular 4 - Seeking clarification on the usage of *ngComponentOutlet

When using *ngComponentOutlet, the following code snippets are employed to handle the displaying: Below is a snippet of functional code: this.displayComponent({ 'objects':[ {component: ToDisplayAComponent, expanded: fals ...

angulartypescriptangular-directive

ReactJS Redux Provider fails to accept the store

I'm currently in the process of migrating my redux store from using "createStore" to "configureStore" due to the deprecation of "createStore". I am working with ReactJS 17 and TypeScript, with the following versions of Redux / Redux dependencies: &quo ...

reactjstypescriptreduxreact-reduxprovider

After the "markerClick" event triggers in Angular2 SebmGoogleMapMarker, the view fails to update

I am dealing with an array structured like this: locations: marker[] = [ {id: '1', lat: 51.5239935252832, lng: 5.137663903579778, content: 'Kids Jungalow (5p)', iconUrl: 'img/marker.png'}, {id: '2&apos ...

typescriptangularangular2-changedetection

What is the best way to verify if the ReactDOM.render method has been invoked with a React component as an argument

Here's the code snippet: index.tsx: import React, { Component } from 'react'; import ReactDOM from 'react-dom'; export function Loading(props) { return <div {...props}>loading...</div>; } export class MyComponent e ...

reactjstypescriptunit-testingjestjsreact-dom

Reusing methods in Javascript to create child instances without causing circular dependencies

abstract class Fruit { private children: Fruit[] = []; addChild(child: Fruit) { this.children.push(child); } } // Separate files for each subclass // apple.ts class Apple extends Fruit { } // banana.ts class Banana extends Fruit { } ...

javascriptnode.jstypescript

Using VueJs and typescript, transform the input image into Base64 format

Welcome to my first question on this platform! I am looking for a way to convert an input file (image) from a form using VueJs 3 and typescript to Base64 in order to "send" it to my backend (java, spring boot) and store it in mongodb as part of a "User" m ...

typescriptmongodbvue.jsfrontendbase64

ngx-slick-carousel: a carousel that loops infinitely and adjusts responsively

I have implemented ngx-slick-carousel to showcase YouTube videos in my project. However, I am facing two main issues. Firstly, the carousel is not infinite, and when the last video is reached, there appears to be white spaces before it loops back to the fi ...

javascriptjqueryangulartypescriptbootstrap-5

What is the solution for resolving the Angular error 'Cannot read property "_co.x" of undefined'?

Currently, I am facing an issue with nested JSON objects on a form that sends data to a database. Despite trying the *ngIf statement as recommended in Angular 5 - Stop errors from undefined object before loading data, the view does not update even after th ...

jsonangular

Divide the string into several segments according to its position value

Here is a piece of text that I would like to divide into multiple sections, determined by the offset and length. If you have any questions or comments and would like to get in touch with ABC, please go to our customer support page. Below is a function ...

javascripttypescript

Customize the appearance of Angular components by altering their color schemes

When working on my project, I often utilize pre-made Angular components. However, some of these components come with colors that do not align with the overall aesthetic of my project (refer to image above). To rectify this issue, I am looking to replace t ...

cssangular

Encountering a Node V18 Peer Dependency Conflict错

Can someone please help me understand what's causing this error? Every time I try to install a dependency, this keeps popping up. I'm completely lost and unsure of what's happening. npm ERR! 1 more (the root project) npm ERR! peer ...

javascriptnode.jsangularnpm

Steps for incorporating ProxyConfig in Angular7 Application1. First, create a new

Having trouble building the application with proxy configuration. It works fine with ng serve or npm run start, but I need it to work with npm run build or ng build. After that, I want to deploy the dist folder to Tomcat webapps and make everything functio ...

angulartypescriptnpmangular-cli-v7

Step-by-step guide to setting up Angular 2 with fullpage.js scrolloverflow

I am currently working on a project using Angular 2 that incorporates the fullpage.js port from https://github.com/meiblorn/ngx-fullpage. I am facing an issue with implementing scrolloverflow on a specific section and could use some guidance. I have alread ...

htmlangularfullpage.js